<div data-automation-id="search_result_table"
     class="mdl-data-table mdl-js-data-table mdl-shadow--2dp full-width">
    <p data-automation-id="search_error_message" *ngIf="errorMessage">{{ 'SEARCH.RESULTS.ERROR' | translate:{errorMessage: errorMessage} }}</p>
    <div class="container">
        <alfresco-document-list
            [node]="nodeResults"
            [contextMenuActions]="true"
            [creationMenuActions]="false"
            [contentActions]="true"
            [navigationMode]="navigationMode"
            [enablePagination]="false"
            (error)="onNavigationError($event)"
            (success)="resetError()"
            (preview)="onPreviewFile($event)">
            <empty-folder-content>
                <ng-template>
                    <div class="empty_template">
                        <div class="no-result-message">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: searchTerm} }}</div>
                        <img [src]="emptyFolderImageUrl" class="no-result__empty_doc_lib">
                    </div>
                </ng-template>
            </empty-folder-content>

            <content-columns>
                <content-column key="$thumbnail" type="image"></content-column>
                <content-column
                    title="{{'SEARCH.DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                    key="name"
                    sortable="true"
                    class="full-width ellipsis-cell">
                </content-column>
                <content-column
                    title="{{'SEARCH.DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                    key="createdByUser.displayName"
                    sortable="true"
                    class="desktop-only">
                </content-column>
                <content-column
                    title="{{'SEARCH.DOCUMENT_LIST.COLUMNS.CREATED_ON' | translate}}"
                    key="createdAt"
                    type="date"
                    format="medium"
                    sortable="true"
                    class="desktop-only">
                </content-column>
            </content-columns>

            <content-actions>
                <!-- folder actions -->
                <content-action
                    target="folder"
                    title="{{'SEARCH.DOCUMENT_LIST.ACTIONS.FOLDER.DELETE' | translate}}"
                    handler="delete">
                </content-action>
                <!-- document actions -->
                <content-action
                    target="document"
                    title="{{'SEARCH.DOCUMENT_LIST.ACTIONS.DOCUMENT.DOWNLOAD' | translate}}"
                    handler="download">
                </content-action>
                <content-action
                    target="document"
                    title="{{'SEARCH.DOCUMENT_LIST.ACTIONS.DOCUMENT.DELETE' | translate}}"
                    handler="delete">
                </content-action>
            </content-actions>
        </alfresco-document-list>
        <alfresco-pagination
            (changePageSize)="onChangePageSize($event)"
            (nextPage)="onNextPage($event)"
            (prevPage)="onPrevPage($event)"
            [pagination]="pagination"
            [maxItems]="maxResults"
            [supportedPageSizes]="[5, 10, 15, 20]">
        </alfresco-pagination>
    </div>
</div>
