<div class="panel-viewer-wrapper">
  <div class="panel-viewer-title">
    <i class="fa fa-info-circle"></i>
    {{'label.frequent-questions.title' | translate}}
  </div>

  <div class="panel-viewer-body">
    <div class="row pt-3 pb-4">
      <div class="col-2"></div>
      <div class="col-8 border-all">
        <div class="row pt-2">
          <div class="col-12">
            <button mat-mini-fab color="warn" (click)="addFile()" class="pull-right">
              <mat-icon>file_upload</mat-icon>
            </button>
            <button mat-mini-fab color="primary" (click)="fileUpload.click()" class="pull-right">
              <mat-icon>file_upload</mat-icon>
            </button>
            <input type="file" #fileUpload name="fileUpload" (change)="uploadFiles($event.target.files)"
              accept="{{accept}}" style="display:none;">
          </div>
        </div>

        <div class="row pt-2">
          <div class="col-12" style="padding-bottom:15px;">
            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
              <!-- Load ID -->
              <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> ID de carga </th>
                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.id}} </td>
              </ng-container>

              <!-- Filename -->
              <ng-container matColumnDef="filename">
                <th mat-header-cell *matHeaderCellDef style="width: 20%;"> Nombre del archivo </th>
                <td mat-cell *matCellDef="let element" style="width: 20%;"> {{element.filename}} </td>
              </ng-container>

              <!-- Status -->
              <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Estado </th>
                <td mat-cell *matCellDef="let element" style="width: 15%;">
                  <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
                </td>
              </ng-container>

              <!-- User -->
              <ng-container matColumnDef="user">
                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Usuario </th>
                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.user}} </td>
              </ng-container>

              <!-- Fecha de carga -->
              <ng-container matColumnDef="uploadDate">
                <th mat-header-cell *matHeaderCellDef style="width: 15%;"> Fecha de carga </th>
                <td mat-cell *matCellDef="let element" style="width: 15%;"> {{element.uploadDate}} </td>
              </ng-container>

              <!-- Actions -->
              <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef style="width: 20%;"></th>
                <td mat-cell *matCellDef="let element" style="width: 20%;" class="text-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element)"
                      [disabled]="!resourceAuth['delete']">
                      <i class="fa fa-trash"></i>
                      <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                        {{'btn.delete' | translate}}
                      </span>
                    </button>
                  </div>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </div>
        </div>
      </div>
      <div class="col-2"></div>
    </div>
  </div>

  <div class="footer-bar">
    <div class="row">
      <div class="col-12">
        <button mat-stroked-button matStepperPrevious class="pull-left">
          <i class="fa fa-chevron-left"></i>
          <span class="pl-1">{{'btn.previous' | translate}}</span>
        </button>
        <button mat-stroked-button (click)="next()" class="pull-right" [disabled]="!dataSource.length">
          <span class="pr-1">{{'btn.next' | translate}}</span>
          <i class="fa fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>

</div>