<div class="container">

    <mat-accordion class="adf-container-recent">
        <mat-expansion-panel  hideToggle="true">
            <mat-expansion-panel-header >
                <mat-panel-title>
                    {{ 'DOCUMENT_LIST.RECENT.TITLE' | translate }}<mat-icon>history</mat-icon>
                </mat-panel-title>
            </mat-expansion-panel-header>

            <adf-document-list
                [currentFolderId]="'-recent-'"
                locationFormat="/files"
                [display]="'gallery'"
                [showHeader]="false"
                [maxItems]="5"
                (preview)="showFile($event)"
                selectionMode="null">
                <empty-folder-content>
                    <ng-template>
                        <div class="empty-list__block">
                            <mat-icon>history</mat-icon>
                            <p class="empty-list__title">{{ 'DOCUMENT_LIST.RECENT.EMPTY_STATE.TITLE' | translate}}</p>
                        </div>
                    </ng-template>
                </empty-folder-content>
            </adf-document-list>
        </mat-expansion-panel>
    </mat-accordion>

    <div class="adf-site-container-style" id="site-container">
        <adf-sites-dropdown (change)="getSiteContent($event)" [hideMyFiles]="false" >
        </adf-sites-dropdown>
    </div>
    <div class="document-list-container" fxLayout="row" fxLayoutAlign="start stretch" fxLayoutGap="16px">
        <adf-upload-drag-area fxFlex="1 1 auto"
                              [disabled]="disableDragArea"
                              [parentId]="getDocumentListCurrentFolderId()"
                              [versioning]="versioning"
                              [adf-node-permission]="'create'"
                              [adf-nodes]="disableDragArea ? getCurrentDocumentListNode() : []">
            <div *ngIf="errorMessage" class="error-message">
                <button (click)="resetError()" mat-icon-button>
                    <mat-icon>highlight_off</mat-icon>
                </button>
                <span class="error-message--text">{{errorMessage}}</span>
            </div>
            <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
                <adf-toolbar-title fxFlex="0 1 auto">
                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
                                    class="files-breadcrumb"
                                    root="Personal Files"
                                    (navigate)="onBreadcrumbNavigate($event)"
                                    [target]="documentList"
                                    [folderNode]="documentList.folderNode">
                    </adf-breadcrumb>
                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
                                             class="files-breadcrumb"
                                             [target]="documentList"
                                             [folderNode]="documentList.folderNode">
                    </adf-dropdown-breadcrumb>
                </adf-toolbar-title>

                <adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>

                <div fxFlex="0 0 auto" class="adf-document-action-buttons" fxShow fxHide.lt-sm="true">
                    <button
                        mat-icon-button
                        title="{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}"
                        (click)="toogleGalleryView()">
                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                    </button>
                    <button
                        mat-icon-button
                        [disabled]="!canCreateContent(documentList.folderNode)"
                        title="{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}"
                        [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!canEditFolder(documentList.selection)"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!hasSelection(documentList.selection)"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"
                            [adfNodeDownload]="documentList.selection">
                        <mat-icon>get_app</mat-icon>
                    </button>
                    <button mat-icon-button
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection"
                            title="{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}"
                            (delete)="documentList.reload()"
                            [adf-delete]="documentList.selection">
                        <mat-icon>delete</mat-icon>
                    </button>
                    <button mat-icon-button
                            [disabled]="!documentList.selection.length"
                            #favorite="adfFavorite"
                            [adf-node-favorite]="documentList.selection">
                        <mat-icon>
                            {{ favorite.hasFavorites() ? 'star' :'star_border' }}
                        </mat-icon>
                    </button>
                </div>

                <button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker">
                    <mat-icon>format_color_fill</mat-icon>
                </button>

                <mat-menu #themePicker="matMenu">
                    <button mat-menu-item (click)="toolbarColor = 'default'">Default</button>
                    <button mat-menu-item (click)="toolbarColor = 'primary'">Primary</button>
                    <button mat-menu-item (click)="toolbarColor = 'accent'">Accent</button>
                    <button mat-menu-item (click)="toolbarColor = 'warn'">Warn</button>
                </mat-menu>

                <button mat-icon-button (click)="showVersions = !showVersions">
                    <mat-icon *ngIf="!showVersions">chevron_left</mat-icon>
                    <mat-icon *ngIf="showVersions">chevron_right</mat-icon>
                </button>

                <adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>

                <button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item
                            (click)="toogleGalleryView()">
                        <mat-icon *ngIf="displayMode === 'list'" >view_comfy</mat-icon>
                        <mat-icon *ngIf="displayMode === 'gallery'">list</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [adf-create-folder]="getDocumentListCurrentFolderId()">
                        <mat-icon>create_new_folder</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.NEW_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!canEditFolder(documentList.selection)"
                            [adf-edit-folder]="documentList.selection[0]?.entry">
                        <mat-icon>create</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.EDIT_FOLDER' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            [disabled]="!hasSelection(documentList.selection)"
                            title="Download"
                            (click)="downloadNodes(documentList.selection)">
                        <mat-icon>get_app</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}</span>
                    </button>
                    <button mat-menu-item
                            adf-node-permission="delete"
                            [adf-nodes]="documentList.selection">
                        <mat-icon>delete</mat-icon>
                        <span>{{ 'DOCUMENT_LIST.TOOLBAR.DELETE' | translate }}</span>
                    </button>
                </mat-menu>
            </adf-toolbar>

            <adf-document-list
                #documentList
                [enableInfiniteScrolling]="infiniteScrolling"
                [permissionsStyle]="permissionsStyle"
                [currentFolderId]="currentFolderId"
                [contextMenuActions]="true"
                [contentActions]="true"
                [allowDropFiles]="true"
                [selectionMode]="selectionMode"
                [multiselect]="multiselect"
                [display]="displayMode"
                [node]="nodeResult"
                (error)="onNavigationError($event)"
                (success)="resetError()"
                (ready)="emitReadyEvent($event)"
                (preview)="showFile($event)"
                (folderChange)="onFolderChange($event)"
                (permissionError)="handlePermissionError($event)">
                <empty-folder-content *ngIf="disableDragArea">
                    <ng-template>
                        <div class="adf-empty_template">
                            <div class="adf-no-result-message">{{ 'SEARCH.NO_RESULT' | translate }}</div>
                        </div>
                    </ng-template>
                </empty-folder-content>
                <data-columns>
                    <data-column
                        key="$thumbnail"
                        type="image"
                        [sortable]="false"
                        class="image-table-cell">
                    </data-column>
                    <data-column
                        key="name"
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        [formatTooltip]="getNodeNameTooltip"
                        class="full-width ellipsis-cell">
                    </data-column>
                    <!-- Location column demo -->
                    <!--
                    <data-column
                        key="path"
                        type="location"
                        format="/files"
                        title="Location">
                    </data-column>
                    -->
                    <data-column
                        key="content.sizeInBytes"
                        title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                        type="fileSize">
                    </data-column>
                    <!-- Notes: has performance overhead due to multiple files/folders causing separate HTTP calls to get tags -->
                    <!--
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.TAG' | translate}}"
                        key="id"
                        class="full-width ellipsis-cell">
                        <ng-template let-entry="$implicit">
                            <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                        </ng-template>
                    </data-column>
                    -->
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                        key="createdByUser.displayName"
                        class="desktop-only">
                    </data-column>
                    <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                        key="createdAt"
                        type="date"
                        format="timeAgo"
                        class="desktop-only">
                    </data-column>

                </data-columns>

                <content-actions>
                    <!-- common actions -->
                    <content-action
                        icon="get_app"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOWNLOAD' | translate}}"
                        handler="download">
                    </content-action>
                    <content-action
                        icon="content_copy"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.COPY' | translate}}"
                        permission="update"
                        [disableWithNoPermission]="true"
                        (error)="onContentActionError($event)"
                        (success)="onContentActionSuccess($event)"
                        handler="copy">
                    </content-action>
                    <content-action
                        icon="redo"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.MOVE' | translate}}"
                        permission="update"
                        [disableWithNoPermission]="true"
                        (error)="onContentActionError($event)"
                        (success)="onContentActionSuccess($event)"
                        handler="move">
                    </content-action>
                    <content-action
                        icon="delete"
                        permission="delete"
                        [disableWithNoPermission]="true"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                        (permissionEvent)="handlePermissionError($event)"
                        (success)="onDeleteActionSuccess($event)"
                        handler="delete">
                    </content-action>
                    <content-action
                        icon="info"
                        title="{{'DOCUMENT_LIST.ACTIONS.METADATA' | translate}}"
                        (execute)="onManageMetadata($event)">
                    </content-action>
                    <!-- document actions -->
                    <content-action
                        icon="storage"
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.VERSIONS' | translate}}"
                        (execute)="onManageVersions($event)">
                    </content-action>
                    <content-action
                        *ngIf="authenticationService.isBpmLoggedIn()"
                        icon="play_arrow"
                        target="document" 
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.PROCESS_ACTION' | translate}}"
                        (execute)="startProcesAction($event)">
                    </content-action>
                </content-actions>
            </adf-document-list>
            <adf-pagination
                #standardPagination
                *ngIf="!infiniteScrolling"
                class="adf-documentlist-pagination"
                [target]="documentList"
                [supportedPageSizes]="supportedPages"
                (changePageSize)="onChangePageSize($event)"
                (changePageNumber)="onChangePageNumber($event)"
                (nextPage)="onNextPage($event)"
                (prevPage)="onPrevPage($event)">
            </adf-pagination>
            <adf-infinite-pagination
                *ngIf="infiniteScrolling"
                [target]="documentList"
                [loading]="documentList.infiniteLoading">
                {{ 'ADF-DOCUMENT-LIST.LAYOUT.LOAD_MORE' | translate }}
            </adf-infinite-pagination>
        </adf-upload-drag-area>

        <adf-info-drawer-layout *ngIf="showVersions" class="adf-manage-versions-sidebar" fxFlex="0 0 auto">

            <div info-drawer-content>
                <ng-container *ngIf="hasOneFileSelected();else choose_document_template">
                    <ng-container *ngIf="userHasPermissionToManageVersions(); else no_permission_to_versions">
                        <adf-version-manager
                            [node]="documentList.selection[0].entry">
                        </adf-version-manager>
                    </ng-container>
                </ng-container>
                <ng-template #choose_document_template>
                    <div class="adf-manage-versions-empty">
                        <mat-icon class="adf-manage-versions-empty-icon">face</mat-icon>
                        {{'VERSION.CHOOSE_FILE' | translate}}
                    </div>
                </ng-template>
                <ng-template #no_permission_to_versions>
                    <div class="adf-manage-versions-no-permission">
                        <mat-icon class="adf-manage-versions-no-permission-icon">warning</mat-icon>
                        {{'VERSION.NO_PERMISSION' | translate}}
                    </div>
                </ng-template>
            </div>
        </adf-info-drawer-layout>
    </div>
</div>

<context-menu-holder></context-menu-holder>

<div *ngIf="processId">
    <adf-start-process
        [values]="formValues"
        [appId]="processId">
    </adf-start-process>
</div>

<div class="adf-content-service-settings">

    <p>Current folder ID: {{ documentList.currentFolderId }}</p>

    <div class="p-10">
        Selected Nodes:
        <ul>
            <li *ngFor="let node of documentList.selection">
                {{ node.entry.name }}
            </li>
        </ul>
    </div>

    <div class="container">
        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multiselect">{{'DOCUMENT_LIST.MULTISELECT_CHECKBOXES' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="multipleFileUpload">
                {{'DOCUMENT_LIST.MULTIPLE_FILE_UPLOAD' | translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="folderUpload">{{'DOCUMENT_LIST.FOLDER_UPLOAD' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="acceptedFilesTypeShow">{{'DOCUMENT_LIST.CUSTOM_FILTER' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="maxSizeShow">{{'DOCUMENT_LIST.MAX_SIZE' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="versioning">{{'DOCUMENT_LIST.ENABLE_VERSIONING' |
                translate}}
            </mat-slide-toggle>
        </section>

        <section>
            <mat-slide-toggle [color]="'primary'" [(ngModel)]="infiniteScrolling">
                {{'DOCUMENT_LIST.ENABLE_INFINITE_SCROLL' | translate}}
            </mat-slide-toggle>
        </section>

        <h5>Upload</h5>
        <section *ngIf="acceptedFilesTypeShow">
            <mat-form-field floatPlaceholder="float">
                <input matInput
                       placeholder="Extension accepted"
                       [(ngModel)]="acceptedFilesType"
                       data-automation-id="accepted-files-type">
            </mat-form-field>
        </section>
        <section *ngIf="maxSizeShow">
            <mat-form-field>
                <input matInput type="number" placeholder="Max file size" [(ngModel)]="maxFilesSize"
                       data-automation-id="max-files-size">
            </mat-form-field>
        </section>
        <div *ngIf="!acceptedFilesTypeShow">
            <adf-upload-button
                #uploadButton
                tooltip="Custom tooltip"
                [disabled]="!enableUpload"
                data-automation-id="multiple-file-upload"
                [rootFolderId]="documentList.currentFolderId"
                [multipleFiles]="multipleFileUpload"
                [uploadFolders]="folderUpload"
                [maxFilesSize]="maxSizeShow ? maxFilesSize : null"
                (error)="handleUploadError($event)"
                [versioning]="versioning"
                [adf-node-permission]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                (permissionEvent)="handlePermissionError($event)">
            </adf-upload-button>
        </div>
        <div *ngIf="acceptedFilesTypeShow">
            <adf-upload-button
                #uploadButton
                tooltip="Custom tooltip"
                [disabled]="!enableUpload"
                data-automation-id="multiple-file-upload"
                [rootFolderId]="documentList.currentFolderId"
                [acceptedFilesType]="acceptedFilesType"
                [multipleFiles]="multipleFileUpload"
                [uploadFolders]="folderUpload"
                [versioning]="versioning"
                (error)="handleUploadError($event)"
                [adf-node-permission]="'create'"
                [adf-nodes]="enableUpload ? getCurrentDocumentListNode() : []"
                (permissionEvent)="handlePermissionError($event)">
            </adf-upload-button>
        </div>
        <section>
            <mat-checkbox [(ngModel)]="enableUpload">
                {{'DOCUMENT_LIST.DESCRIPTION_UPLOAD' | translate}}
            </mat-checkbox>
        </section>
    </div>

    <div class="p-10">
        <p>
            {{'DOCUMENT_LIST.MULTISELECT_DESCRIPTION' | translate}}
        </p>
        <mat-form-field>
            <mat-select placeholder="Selection Mode" [(ngModel)]="selectionMode" name="food">
                <mat-option *ngFor="let mode of selectionModes" [value]="mode.value">
                    {{mode.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</div>

<file-uploading-dialog #fileDialog></file-uploading-dialog>
