<!-- ********************************************************************************
 * Copyright (c) 2015-2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ******************************************************************************** -->
<!-- main explorer table -->
<p-table [value]="fileMetas"
         [columns]="columnConfigs"

         selectionMode="single"
         [(selection)]="selectedFileMeta"
         [metaKeySelection]="true"

         [contextMenu]="cm"
         contextMenuSelectionMode="joint"

         [resizableColumns]="true">

    <!-- caption -->
    <ng-template pTemplate="caption">
      <!-- selected node -->
      <span *ngIf="node" style="float: left; margin-top: 7px;">
        {{'file-explorer.file-explorer.ttl-attached-to' | translate }}
        {{node?.name}}
      </span>
      <!-- download -->
      <button type="button"
              class="btn btn-mdm"
              (click)="onDownloadFile($event)"
              title="{{'file-explorer.file-explorer.btn-download-file' | translate }}"
              [disabled]="!selectedFileMeta">
        <span class="fa fa-arrow-circle-o-down"></span>
      </button>
      <!-- upload -->
      <button type="button"
              class="btn btn-mdm"
              (click)="onShowUploadDialog($event)"
              title="{{'file-explorer.file-explorer.btn-upload-files' | translate }}"
              [disabled]="readOnly">
        <span class="fa fa-arrow-circle-o-up"></span>
      </button>      
      <!-- preview -->
      <button type="button"
               class="btn btn-mdm"
               (click)="onPreviewFile($event)"
               title="{{'file-explorer.file-explorer.btn-preview-file' | translate }}"
               [disabled]="!selectedFileMeta">
        <span class="fa fa-search"></span>
      </button>
      <!-- refresh -->
      <button type="button"
              class="btn btn-mdm"
              (click)="onRefresh($event)"
              title="{{'file-explorer.file-explorer.btn-refresh' | translate }}">
        <span class="fa fa-refresh"></span>
      </button>
      <!-- delete -->
      <button type="button"
               class="btn btn-mdm"
               (click)="onDeleteFile($event)"
               title="{{'file-explorer.file-explorer.btn-delete-file' | translate }}"
               [disabled]="!selectedFileMeta || readOnly">
        <span class="fa fa-times"></span>
      </button>
    </ng-template>

    <!-- header -->
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn>
                {{col.header | translate}}
                <p-sortIcon [field]="col.field"
                             ariaLabel="Activate to sort"
                             ariaLabelDesc="Activate to sort in descending order"
                             ariaLabelAsc="Activate to sort in ascending order">
                </p-sortIcon>
            </th>
        </tr>
    </ng-template>

    <!-- body -->
    <ng-template pTemplate="body" let-rowData let-columns="columns" let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex" [pContextMenuRow]="rowData">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>

    <!-- empty message -->
    <ng-template pTemplate="emptymessage" let-columns>
        <tr>
            <td [attr.colspan]="columns?.length">
                {{'file-explorer.file-explorer.msg-no-files-attached' | translate }}
            </td>
        </tr>
    </ng-template>
</p-table>

<!-- context menu for explorer table -->
<p-contextMenu #cm [model]="ctxMenuItems" class="mdmContextMenu"></p-contextMenu>

<!-- confirm dialog for delete file from data base -->
<p-confirmDialog #cd key="fileExplorerConfirmation"
    header="{{'file-explorer.file-explorer.ttl-confirmation' | translate }}"
    icon="fa fa-exclamation-triangle"
    appendTo="body">
    <p-footer>
        <button type="button"
            (click)="cd.accept()"
            class="btn btn-mdm">
            <span class="fa fa-check"></span>
        </button>
        <button type="button"
                (click)="cd.reject()"
                class="btn btn-mdm">
                <span class="fa fa-times"></span>
        </button>
    </p-footer>
</p-confirmDialog>