<div class="container">
    <alfresco-upload-drag-area
        [rootFolderId]="documentList.currentFolderId"
        [versioning]="versioning"
        [enabled]="documentList.hasCreatePermission()">
        <adf-breadcrumb
            [target]="documentList"
            [folderNode]="documentList.folderNode">
        </adf-breadcrumb>
        <div *ngIf="errorMessage" class="error-message">
            <button (click)="resetError()" class="mdl-button mdl-js-button mdl-button--icon">
                <i class="material-icons">highlight_off</i>
            </button>
            <span class="error-message--text">{{errorMessage}}</span>
        </div>
        <ng-container *ngIf="useCustomToolbar">
            <adf-toolbar title="Toolbar">
                <button md-icon-button (click)="onCreateFolderClicked($event)">
                    <md-icon>create_new_folder</md-icon>
                </button>
                <button md-icon-button>
                    <md-icon>delete</md-icon>
                </button>
                <button md-icon-button [mdMenuTriggerFor]="menu">
                    <md-icon>more_vert</md-icon>
                </button>
                <md-menu #menu="mdMenu">
                    <button md-menu-item>
                        <md-icon>dialpad</md-icon>
                        <span>Redial</span>
                    </button>
                    <button md-menu-item disabled>
                        <md-icon>voicemail</md-icon>
                        <span>Check voicemail</span>
                    </button>
                    <button md-menu-item>
                        <md-icon>notifications_off</md-icon>
                        <span>Disable alerts</span>
                    </button>
                </md-menu>
            </adf-toolbar>
        </ng-container>
        <alfresco-document-list
                #documentList
                [creationMenuActions]="!useCustomToolbar"
                [currentFolderId]="currentFolderId"
                [contextMenuActions]="true"
                [contentActions]="true"
                [allowDropFiles]="true"
                (error)="onNavigationError($event)"
                (success)="resetError()"
                (preview)="showFile($event)"
                (permissionError)="handlePermissionError($event)">
            <data-columns>
                <data-column key="$thumbnail" type="image" [sortable]="false"></data-column>
                <data-column
                        title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                        key="name"
                        class="full-width ellipsis-cell">

                    <!-- Example #1: using custom template with implicit access to data context -->
                    <!--
                    <ng-template let-entry="$implicit">
                        <span>Hi! {{entry.data.getValue(entry.row, entry.col)}}</span>
                    </ng-template>
                    -->

                    <!-- Example #2: using custom template with value access -->
                    <!--
                    <ng-template let-value="value">
                        <span>Hi! {{value}}</span>
                    </ng-template>
                    -->

                </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">
                    <template let-entry="$implicit">
                        <alfresco-tag-node-list  [nodeId]="entry.data.getValue(entry.row, entry.col)"></alfresco-tag-node-list>
                    </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_ON' | translate}}"
                        key="createdAt"
                        type="date"
                        format="medium"
                        class="desktop-only">
                </data-column>
            </data-columns>

            <content-actions>
                <!-- folder actions -->
                <content-action
                        target="folder"
                        permission="delete"
                        [disableWithNoPermission]="true"
                        title="{{'DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                        (permissionEvent)="handlePermissionError($event)"
                        handler="delete">
                </content-action>
                <!-- document actions -->
                <content-action
                        target="document"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                        handler="download">
                </content-action>
                <content-action
                        target="document"
                        permission="delete"
                        [disableWithNoPermission]="true"
                        (permissionEvent)="handlePermissionError($event)"
                        title="{{'DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                        handler="delete">
                </content-action>
            </content-actions>
        </alfresco-document-list>
    </alfresco-upload-drag-area>
</div>

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

<div class="container">
    <section>
        <md-slide-toggle [(ngModel)]="useCustomToolbar">Use custom toolbar</md-slide-toggle>
    </section>

    <section>
        <md-slide-toggle [(ngModel)]="multipleFileUpload">Multiple File Upload</md-slide-toggle>
    </section>

    <section>
        <md-slide-toggle [(ngModel)]="folderUpload">Folder upload</md-slide-toggle>
    </section>

    <section>
        <md-slide-toggle [(ngModel)]="acceptedFilesTypeShow">Custom extensions filter</md-slide-toggle>
    </section>

    <section>
        <md-slide-toggle [(ngModel)]="versioning">Enable versioning</md-slide-toggle>
    </section>

    <section>
        <md-slide-toggle [(ngModel)]="disableWithNoPermission">Disable upload button when user has no permissions</md-slide-toggle>
    </section>

    <h5>Upload</h5>
    <section *ngIf="acceptedFilesTypeShow">
        <md-input-container>
            <input mdInput placeholder="Extension accepted" [(ngModel)]="acceptedFilesType"  data-automation-id="accepted-files-type">
        </md-input-container>
    </section>
    <div *ngIf="!acceptedFilesTypeShow">
        <alfresco-upload-button
            #uploadButton
            [disabled]="!enableUpload"
            data-automation-id="multiple-file-upload"
            [rootFolderId]="documentList.currentFolderId"
            [multipleFiles]="multipleFileUpload"
            [uploadFolders]="folderUpload"
            [versioning]="versioning"
            [disableWithNoPermission]="disableWithNoPermission"
            (permissionEvent)="handlePermissionError($event)">
        </alfresco-upload-button>
    </div>
    <div *ngIf="acceptedFilesTypeShow">
        <alfresco-upload-button
            #uploadButton
            [disabled]="!enableUpload"
            data-automation-id="multiple-file-upload"
            [rootFolderId]="documentList.currentFolderId"
            [acceptedFilesType]="acceptedFilesType"
            [multipleFiles]="multipleFileUpload"
            [uploadFolders]="folderUpload"
            [versioning]="versioning"
            [disableWithNoPermission]="disableWithNoPermission"
            (permissionEvent)="handlePermissionError($event)">
        </alfresco-upload-button>
    </div>
    <section>
        <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state)</md-checkbox>
    </section>
</div>

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

<div *ngIf="fileShowed">
    <alfresco-viewer [(showViewer)]="fileShowed"
                     [fileNodeId]="fileNodeId"
                     [overlayMode]="true">

        <extension-viewer [supportedExtensions]="['obj','3DS']" #extension>
            <ng-template let-urlFileContent="urlFileContent" let-extension="extension" >
                <threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>
            </ng-template>
        </extension-viewer>

    </alfresco-viewer>

    <!-- Comment the viewer above and uncomment that one below if you want test the overlay false viewer-->

    <!--<div *ngIf="fileShowed" class="adf-not-overlay-viewer">-->
        <!--<alfresco-viewer [(showViewer)]="fileShowed"-->
                         <!--[fileNodeId]="fileNodeId"-->
                         <!--[overlayMode]="false">-->
        <!--</alfresco-viewer>-->
    <!--</div>-->

</div>