<!--********************************************************************************
 * 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
 *
 ********************************************************************************-->
<p-table [value]="selectedFileMetasUpload">
    <!-- caption -->
    <ng-template pTemplate="caption">
        <!-- add -->
        <div class="fileupload btn btn-mdm"
            title="{{'file-explorer.file-explorer.btn-add-files' | translate }}">
            <span class="fa fa-plus"></span>
            <input #fileinput
                id="fileUploadInput"
                title="{{'file-explorer.file-explorer.btn-add-files' | translate }}"
                class="upload"
                name="datei"
                type="file"
                (change)=onSelectFileForUpload($event)
                multiple>
        </div>
        <!-- upload -->
        <button type="button"
                class="btn btn-mdm"
                (click)="onUploadSelectedFiles($event)"
                title="{{'file-explorer.file-explorer.btn-upload-file-selection' | translate }}"
                [disabled]="selectedFileMetasUpload?.length == 0">
            <span class="fa fa-check"></span>
        </button>
        <!-- remove all -->
        <button type="button"
                class="btn btn-mdm"
                (click)="onClearSelectedFileMetasUpload($event)"
                title="{{'file-explorer.file-explorer.btn-remove-all-files-from-selection' | translate }}"
                [disabled]="selectedFileMetasUpload?.length == 0">
            <span class="fa fa-eraser"></span>
        </button>
    </ng-template>

    <!-- header -->
    <ng-template pTemplate="header">
        <tr>
            <th style="width: 50px;"></th>
            <th>{{'file-explorer.file-explorer.hdr-filename' | translate}}</th>
            <th>{{'file-explorer.file-explorer.hdr-description' | translate}}</th>
            <!-- <th>{{'file-explorer.file-explorer.hdr-type' | translate}}</th> -->
            <th>{{'file-explorer.file-explorer.hdr-size' | translate}}</th>
            <th style="width: 68px;"></th>
        </tr>
    </ng-template>

    <!-- body -->
    <ng-template pTemplate="body" let-filedata>
        <tr>
            <td>
                <thumbnail [imgUrl]="filedata.dataUrl" [type]="filedata.file.type"></thumbnail>
            </td>
            <td>{{filedata.file.name}}</td>
            <td pEditableColumn>
              <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="filedata.description">
                </ng-template>
                <ng-template pTemplate="output">
                    {{filedata.description}}
                </ng-template>
              </p-cellEditor>
            </td>
            <!-- <td pEditableColumn>
                <p-cellEditor>
                  <ng-template pTemplate="input">
                      <input pInputText type="text" [(ngModel)]="filedata.file.type">
                  </ng-template>
                  <ng-template pTemplate="output">
                      {{filedata.file.type}}
                  </ng-template>
                </p-cellEditor>
            </td> -->
            <td>{{filedata.file.size | fileSize: formatSize.BINARY}}</td>
            <td>
                <button type="button"
                    class="btn btn-mdm"
                    (click)="onRemoveFile($event, filedata)"
                    title="{{'file-explorer.file-explorer.btn-remove-file-from-selection' | translate }}">
                    <span class="fa fa-times"></span>
                </button>
            </td>
        </tr>
    </ng-template>
</p-table>