<!-- Page Heading -->
<div class="d-sm-flex mb-2">
    <h1 class="h3 mb-0 text-gray-800" ng-bind-html="filePath"></h1>

    <div ng-show="isLoading && !filePath">
        <h3 class="mb-0 text-gray-800" ng-bind-html="loadPath"></h3>
    </div>
    <div ng-show="!isLoading && !filePath" class="text-gray-800 ">
        <h3 class="d-inline-block text-truncate" ng-bind-html="sentFiles"></h3>

        <h3 ng-show="listFolder.length > 0" class="d-inline-block text-truncate" ng-bind-html="separator"></h3>
        <div ng-show="listFolder.length > 0" class="dropdown no-arrow d-inline-block bottom-10">
            <a class="dropdown-toggle" data-toggle="dropdown"
               href="#" role="button"
               title="{{'COMMON.SHOW_PATH'| translate}}"
               id="folderList">
                <i class="fas fa-ellipsis-h text-dark"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-left shadow animated--fade-in">
                <a class="dropdown-item pointer-cursor"
                   ng-repeat="item in listFolder"
                   ui-sref="myEmail({folder_id:item.folder_id})">
                    <span class="d-block text-truncate max-width-150">{{item.name}}</span>
                </a>
            </div>
        </div>

        <h3 ng-show="folderBefor" class="d-inline-block text-truncate max-width-400"
            ng-bind-html="folderBefor"></h3>
        <h3 class="d-inline-block text-truncate max-width-400" title="{{currentFolder.folder.name}}"
            ng-bind-html="currentFol"></h3>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row mx-0" ng-if="!resultProject || resultProject.length === 0">
                    <div class="col-12 text-center text-gray-500" ng-show="!submitting">
                        <i class="fa fa-3x fa-envelope d-block"></i>
                        <span class="d-block">{{'COMMON.PROJECT_MY_FILES_NOT_FOUND' | translate}}</span>
                    </div>
                    <div class="col-12 text-center" ng-show="submitting">
                        <div class="lds-facebook">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
                <div class="row mx-0" ng-if="resultProject && resultProject.length > 0">
                    <!-- search and paging >md -->
                    <div class="form-group d-none d-lg-flex col-8 px-0">
                        <select class="border rounded-left tool-bar-padding pointer-cursor"
                                ng-change="loadProjectItems()"
                                ng-model="active.selected"
                                ng-options="opt as opt.name for opt in filterOptions track by opt.id">
                        </select>
                        <input class="form-control rounded-right border-left-0 b-radius"
                               ng-keyup="$event.keyCode === 13 && doSearch()"
                               ng-model="searchString.key"
                               placeholder="{{'COMMON.SEARCH' | translate}}"
                               type="search"/>
                    </div>
                    <div class="form-group d-none d-lg-flex col-4 justify-content-end px-0">
                        <select class="border tool-bar-padding pointer-cursor font-weight-bold custom-color rounded-left"
                                ng-change="pageChanged(pageSize, pagination.currentPage)"
                                ng-model="pageSize"
                                ng-options="opt as opt.name for opt in pageOptions track by opt.id">
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text rounded-right custom-color b-radius border-left-0">{{'COMMON.RECORDS'
                                | translate}}</label>
                        </div>
                        <div class="input-group-prepend" ng-if="selected.length > 1">
                            <label class="input-group-text rounded bg-white ml-1">
                                <div class="dropdown no-arrow">
                                    <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle"
                                       data-toggle="dropdown"
                                       href="#" role="button"
                                       title="{{'COMMON.MORE_OPTIONS'| translate}}"
                                       id="moreOptionId2"
                                       ng-click="openMenu.second = !openMenu.second">
                                        <i class="fas fa-ellipsis-h text-dark"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in">
                                        <a class="dropdown-item pointer-cursor text-dark"
                                           ng-click="downloadSelectedItems()"
                                           ng-if="selected[0].folder === false && selected[0].status === 1">
                                            <i class="fas fa-download pr-2"></i>
                                            {{'MY_EMAIL.TOOLTIP_DOWNLOAD' | translate}}
                                        </a>
                                        <a class="dropdown-item pointer-cursor text-dark"
                                           ng-click="restoreItems(selected, projectId);"
                                           ng-if="selected[0].status !== 1">
                                            <i class="fas fa-trash-restore-alt pr-2"></i>
                                            {{'MY_EMAIL.TOOLTIP_RESTORE' | translate}}
                                        </a>
                                        <a class="dropdown-item pointer-cursor text-dark"
                                           ng-click="removeSubject(selected, projectId);"
                                           ng-if="selected[0].status === 1">
                                            <i class="fas fa-trash pr-06rem"></i>
                                            {{'MY_EMAIL.TOOLTIP_REMOVE' | translate}}
                                        </a>
                                        <a class="dropdown-item pointer-cursor text-dark"
                                           ng-click="deleteForeverSubjects(selected, projectId);"
                                           ng-if="selected[0].status !== 1">
                                            <i class="fas fa-trash pr-2"></i>
                                            {{'MY_EMAIL.TOOLTIP_DELETE_FOREVER' | translate}}
                                        </a>
                                    </div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <!-- search and paging <md -->
                    <div class="d-flex col-12 d-lg-none form-group px-0">
                        <input class="form-control" ng-keyup="$event.keyCode === 13 && doSearch()" ng-model="searchString.key"
                               placeholder="{{'COMMON.SEARCH' | translate}}"
                               type="search"/>
                    </div>
                    <div class="d-flex col-12 d-lg-none form-group px-0">
                        <div class="input-group">
                            <select class="form-control tool-bar-padding pointer-cursor font-weight-bold custom-color"
                                    ng-change="loadProjectItems()"
                                    ng-model="active.selected"
                                    ng-options="opt as opt.name for opt in filterOptions track by opt.id">
                            </select>
                            <select class="form-control tool-bar-padding pointer-cursor font-weight-bold"
                                    ng-change="pageChanged(pageSize, pagination.currentPage)"
                                    ng-model="pageSize"
                                    ng-options="opt as opt.name for opt in pageOptions track by opt.id">
                            </select>
                            <div class="input-group-prepend">
                                <label class="input-group-text rounded-right custom-color border-left-0">{{'COMMON.RECORDS'
                                    | translate}}</label>
                            </div>
                            <div class="input-group-prepend" ng-if="selected.length > 1">
                                <label class="input-group-text border-dark rounded bg-white ml-1">
                                    <div class="dropdown no-arrow">
                                        <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle"
                                           data-toggle="dropdown"
                                           href="#" role="button"
                                           title="{{'COMMON.MORE_OPTIONS'| translate}}"
                                           id="moreOptionId1"
                                           ng-click="openMenu.first = !openMenu.first">
                                            <i class="fas fa-ellipsis-h text-dark"></i>
                                        </a>
                                        <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in">
                                            <a class="dropdown-item pointer-cursor text-dark"
                                               ng-click="downloadSelectedItems()"
                                               ng-if="selected[0].folder === false && selected[0].status === 1">
                                                <i class="fas fa-download pr-2"></i>
                                                {{'MY_EMAIL.TOOLTIP_DOWNLOAD' | translate}}
                                            </a>
                                            <a class="dropdown-item pointer-cursor text-dark"
                                               ng-click="restoreItems(selected, projectId);"
                                               ng-if="selected[0].status !== 1">
                                                <i class="fas fa-trash-restore-alt pr-2"></i>
                                                {{'MY_EMAIL.TOOLTIP_RESTORE' | translate}}
                                            </a>
                                            <a class="dropdown-item pointer-cursor text-dark"
                                               ng-click="removeSubject(selected, projectId);"
                                               ng-if="selected[0].status === 1">
                                                <i class="fas fa-trash pr-06rem"></i>
                                                {{'MY_EMAIL.TOOLTIP_REMOVE' | translate}}
                                            </a>
                                            <a class="dropdown-item pointer-cursor text-dark"
                                               ng-click="deleteForeverSubjects(selected, projectId);"
                                               ng-if="selected[0].status !== 1">
                                                <i class="fas fa-trash pr-2"></i>
                                                {{'MY_EMAIL.TOOLTIP_DELETE_FOREVER' | translate}}
                                            </a>
                                        </div>
                                    </div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div ng-if="resultProject && resultProject.length > 0">
                    <div class="row mx-0">
                        <div class="col-8 col-sm-6 col-md-5 col-lg-4 text-gray-500">
                            <span class="pointer-cursor"
                                  ng-click="doSort('name')">{{'MY_EMAIL.SUBJECT' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSort('name')"
                               ng-if="!isSort && sortField == 'name'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSort('name')"
                               ng-if="isSort && sortField == 'name'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                               ng-click="doSort('name')"
                               ng-if="sortField !== 'name'"></i>
                        </div>
                        <div class="col-2 col-md-1"></div>
                        <div class="d-none d-sm-none d-md-block col-md-4 text-gray-500">
                            <span class="pointer-cursor" ng-click="doSort('modifiedDate')">{{'MY_EMAIL.DATE_SEND' | translate}}</span>
                            <i aria-hidden="true" class="fa fa-sort-down pointer-cursor"
                               ng-click="doSort('modifiedDate')" ng-if="!isSort && sortField == 'modifiedDate'"></i>
                            <i aria-hidden="true" class="fa fa-sort-up pointer-cursor"
                               ng-click="doSort('modifiedDate')" ng-if="isSort && sortField == 'modifiedDate'"></i>
                            <i aria-hidden="true" class="fa fa-sort pointer-cursor"
                               ng-click="doSort('modifiedDate')"
                               ng-if="sortField !== 'modifiedDate'"></i>
                        </div>
                        <div class="d-none d-sm-none d-md-none d-lg-block col-lg-2 text-gray-500">
                            <span>{{'MY_EMAIL.SIZE' | translate}}</span>
                        </div>
                        <div class="col-2 col-sm-4 col-md-2 col-lg-1 text-center"></div>
                    </div>
                    <div class="row mx-0 border-top py-2" ng-if="!items || items.length === 0">
                        <div class="col-12 text-center">
                            <span class="text-muted">{{'COMMON.NO_RECORDS' | translate}}</span>
                        </div>
                    </div>
                    <div class="row mx-0 border-top py-2" ng-show="submitting">
                        <div class="col-12 text-center">
                            <div class="lds-facebook">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="row mx-0 border-top py-2 pointer-cursor" context-menu="menuOptions(item)"
                         context-menu-class="animated--grow-in"
                         ng-class="{'selecting-item':item._selected,'opacity-images':item.status !== 1,'select-hover-color': !item._selected}"
                         ng-click="toggleSelected($event, item)"
                         ng-dblclick="openFolder(item,projectId)"
                         ng-mousedown="whichButton($event,item)"
                         ng-repeat="item in items" ng-show="!submitting">
                        <!-- Active file -->
                        <div class="col-8 col-sm-6 col-md-5 col-lg-4 text-truncate">
                            <div style="width: 90%">
                                <!-- folder -->
                                <i class="fas fa-envelope text-gray-500" ng-if="item.folder"></i>
                                <!-- file -->
                                <span ng-if="!item.folder" ng-switch="getGroupFromMimeType(item)">
                                    <span ng-switch="item.file_type" ng-switch-when="secure">
                                        <i class="far fa-file-pdf text-danger" ng-switch-when="1"></i>
                                            <i class="far fa-file-word text-primary" ng-switch-when="2"></i>
                                            <i class="far fa-file-excel text-success" ng-switch-when="3"></i>
                                            <i class="far fa-file-powerpoint text-warning" ng-switch-when="4"></i>
                                            <i class="far fa-file text-gray-700" ng-switch-when="5"></i>
                                            <i class="far fa-file text-gray-700" ng-switch-default></i>
                                    </span>
                                    <i class="fas fa-file-video text-gray-700" ng-switch-when="video"></i>
                                    <i class="fas fa-file-audio text-gray-700" ng-switch-when="audio"></i>
                                    <i class="fas fa-file-image text-gray-700" ng-switch-when="image"></i>
                                    <i class="far fa-file-alt text-gray-700" ng-switch-when="text"></i>
                                    <i class="far fa-file-archive text-gray-700" ng-switch-when="compress"></i>
                                    <i class="far fa-file text-gray-700" ng-switch-default></i>
                                </span>
                                <span class="text-bold d-inline-flex align-items-center" style="max-width: 100%"
                                      title="{{item.name}}">
                                    <span class="text-truncate">{{item.name}}</span>
                                </span>
                            </div>
                        </div>
                        <div class="col-2 col-md-1 default-cursor p-0">

                            <span class="custom-label custom-label-version"
                                  ng-if="!item.folder && item.total_version > 1"
                                  ng-click="showFileVersion(item, projectId)"
                                  role="button">V{{item.version}}</span>
                            <i aria-hidden="true" class="fas fa-lock" ng-if="item.is_encrypt === 1"
                               title="{{'MY_EMAIL.TOOLTIP_ENCODED' | translate}}"></i>

                        </div>
                        <div class="d-none d-sm-none d-md-block col-md-4">
                            {{formatDateTime(item.last_modified_date)}}
                        </div>

                        <div class="d-none d-sm-none d-md-none d-lg-block col-lg-2">
                            <span ng-if="item.folder == true && item.file_size == 0 && item.status == 2 ">--
                            </span>
                            <span ng-if="item.folder == true && item.file_size <= 1 && item.status == 1">
                                {{item.file_size}} {{'COMMON.FILE' | translate}}
                            </span>
                            <span ng-if="item.folder == true && item.file_size > 1 && item.status == 1">
                                {{item.file_size}} {{'COMMON.FILES' | translate}}
                            </span>
                            <span ng-if="item.folder == false">{{convertFileSize(item.file_size)}}</span>
                        </div>

                        <div class="col-2 col-sm-4 col-md-2 col-lg-1 text-center d-flex justify-content-center">
                            <i class="fas fa-chart-bar mr-2 pointer-cursor align-self-center"
                               ng-click="viewReport(item,projectId)"
                               ng-if="item.folder === false && item.status === 1"
                               title="{{'MY_EMAIL.TOOLTIP_FILE_REPORT' | translate}}"></i>
                            <div class="dropdown no-arrow align-self-center" ng-if="!item.folder" ng-class="{'pl-4' : item.status !== 1}">
                                <a aria-expanded="false" aria-haspopup="true"
                                   class="dropdown-toggle border border-dark rounded px-1"
                                   data-toggle="dropdown" href="#" role="button"
                                   title="{{'COMMON.MORE_OPTIONS'| translate}}"
                                   id="{{'tog' + item.id}}"
                                   ng-click="item.openMenu = !item.openMenu">
                                    <i class="fas fa-ellipsis-h text-dark"></i>
                                </a>
                                <!-- ng-click="doDownload(item,projectId, currentUser.mail_address)" -->
                                <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in align-items-center">
                                    <a class="dropdown-item pointer-cursor text-dark"
                                      ng-click="openModalDownloadOrUnzipAndSaveFolder(item)"
                                       ng-if="item.folder === false && item.status === 1">
                                        <i class="fas fa-download pr-2"></i>
                                        {{'MY_EMAIL.TOOLTIP_DOWNLOAD' | translate}}
                                    </a>
                                    <a class="dropdown-item pointer-cursor text-dark"
                                       ng-click="showViewOnline(item,currentUser.mail_address)"
                                       ng-if="item.folder === false && item.status === 1">
                                        <i class="fas fa-eye pr-04rem"></i>
                                        {{'MY_EMAIL.TOOLTIP_VIEW_ONLINE' | translate}}
                                    </a>
                                    <a class="dropdown-item pointer-cursor text-dark"
                                       ng-click="viewReport(item,projectId)"
                                       ng-if="item.folder === false && item.status === 1">
                                        <i aria-hidden="true" class="fas fa-chart-bar pr-2"></i>
                                        {{'MY_EMAIL.TOOLTIP_FILE_REPORT' | translate}}
                                    </a>
                                    <a class="dropdown-item pointer-cursor text-dark"
                                       ng-click="removeSubject([item],projectId)"
                                       ng-if="item.status === 1">
                                        <i aria-hidden="true" class="fas fa-trash pr-06rem"></i>
                                        {{'MY_EMAIL.TOOLTIP_REMOVE' | translate}}
                                    </a>
                                    <a class="dropdown-item pointer-cursor text-dark"
                                       ng-click="restoreItems([item],projectId)"
                                       ng-if="item.status !== 1">
                                        <i class="fas fa-trash-restore-alt pr-2"></i>
                                        {{'MY_EMAIL.TOOLTIP_RESTORE' | translate}}
                                    </a>
                                    <a class="dropdown-item pointer-cursor text-dark"
                                       ng-click="deleteForeverSubjects([item],projectId)"
                                       ng-if="item.status !== 1">
                                        <i class="fas fa-trash pr-2"></i>
                                        {{'MY_EMAIL.TOOLTIP_DELETE_FOREVER' | translate}}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mx-0 mt-2">
                        <div class="col-12 d-flex justify-content-end px-0">
                            <ul boundary-links="true"
                                class="pagination mb-0"
                                first-text="&laquo;"
                                id="selectContainerPagination"
                                items-per-page="pageSize.value"
                                last-text="&raquo;"
                                max-size='5'
                                next-text="&rsaquo;"
                                ng-change="pageChanged(pageSize, pagination.currentPage)"
                                ng-model="pagination.currentPage"
                                ng-show="items.length > 0"
                                previous-text="&lsaquo;"
                                total-items="totalItems"
                                uib-pagination></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




