<div class="panel-viewer-wrapper">
  <div class="panel-viewer-title">
    <mat-icon>dns</mat-icon>
    {{'label.questions.title' | translate}}
  </div>

  <div class="panel-viewer-body">
    <div class="row pb-4">
      <div class="col-1"></div>
      <div class="col-10">
        <!-- <div class="row pt-2" *ngIf="!viewMode" [hidden]="!(dataSource.data && dataSource.data.length)">
          <div class="col-12">
            <button type="button" class="btn btn-outline-primary btn-sm pull-right" (click)="addFile()">
              <i class="fa fa-file-excel-o"></i>
              <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                {{'btn.new.file' | translate}}
              </span>
            </button>
          </div>
        </div> -->

        <div class="border-all text-center" *ngIf="!(dataSource.data && dataSource.data.length)">
          <button type="button" class="btn btn-outline-primary btn-sm " (click)="addFile()">
            <i class="fa fa-file-excel-o"></i>
            <span class="visible-md-inline visible-lg-inline visible-xl-inline">
              {{'btn.upload.file' | translate}}
            </span>
          </button>
        </div>

        <div class="table-container mat-elevation-z8 p-b-15 mt-3" [hidden]="!(dataSource.data && dataSource.data.length)">
          <table mat-table [dataSource]="dataSource" matSort>
            <!-- Load ID -->
            <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-id text-right">{{'label.file.id' | translate}}</th>
              <td mat-cell *matCellDef="let element" class="w-id text-right"> {{element.id}} </td>
            </ng-container>

            <!-- Filename -->
            <ng-container matColumnDef="filename">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-filename">{{'label.file.name' | translate}}
              </th>
              <td mat-cell *matCellDef="let element" class="w-filename"> {{element.filename}} </td>
            </ng-container>

            <!-- Description -->
            <ng-container matColumnDef="description">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-description">
                {{'label.file.description' | translate}}</th>
              <td mat-cell *matCellDef="let element" class="w-description"> {{element.description}} </td>
            </ng-container>

            <!-- Status -->
            <ng-container matColumnDef="status">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-status">{{'label.file.status' | translate}}
              </th>
              <td mat-cell *matCellDef="let element" class="w-status">
                <span [ngClass]="getClassStatus(element.status)">{{ getTextStatus(element.status) }}</span>
              </td>
            </ng-container>

            <!-- User -->
            <ng-container matColumnDef="user">
              <th mat-header-cell *matHeaderCellDef mat-sort-header class="w-user">{{'label.file.user' | translate}}
              </th>
              <td mat-cell *matCellDef="let element" class="w-user"> {{element.user}} </td>
            </ng-container>

            <!-- Fecha de carga -->
            <ng-container matColumnDef="uploadDate">
              <th mat-header-cell *matHeaderCellDef class="w-uploadDate text-right">{{'label.file.upload.date' | translate}}</th>
              <td mat-cell *matCellDef="let element" class="w-uploadDate text-right"> 
                <i class="fa fa-calendar" *ngIf="element.uploadDate"></i> {{element.uploadDate}} 
              </td>
            </ng-container>

            <!-- Actions -->
            <ng-container matColumnDef="actions">
              <th mat-header-cell *matHeaderCellDef class="w-actions"></th>
              <td mat-cell *matCellDef="let element; let $index = index" class="w-actions text-center">
                <div class="btn-group">
                  <!-- <button type="button" class="btn btn-default btn-sm" (click)="onEditRecord(element, $index)"
                    [disabled]="!resourceAuth['edit'] || viewMode">
                    <i class="fa fa-edit"></i>
                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                      {{'btn.edit' | translate}}
                    </span>
                  </button> -->
                  <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(element, $index)"
                    [disabled]="!resourceAuth['delete'] || viewMode || loadingOption">
                    <i class="fa fa-trash"></i>
                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                      {{'btn.delete' | translate}}
                      
                    </span>
                  </button>
                  <button type="button" class="btn btn-default btn-sm" (click)="onRetryRecord(element, $index)"
                    [disabled]="element.status==='OK' || loadingOption">
                    <i class="fa fa-refresh"></i>
                    <span class="visible-md-inline visible-lg-inline visible-xl-inline">
                      {{'btn.retry.option' | translate}}
                      
                    </span>
                  </button>
                  <!-- <div *ngIf="loadingOption" class="spinner-border" style="margin:auto" ></div> -->
                  
                  <div class="spiner-example" *ngIf="loadingOption" style="height:0px;padding-top: 0px;padding-left: 10px;">
                    <div class="sk-spinner sk-spinner-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>

                </div>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>
        </div>
      </div>
    </div>
    <div class="col-1"></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]=" viewMode? false: !dataSource.data.length || filestate">
          <span class="pr-1">{{'btn.next' | translate}}</span>
          <i class="fa fa-chevron-right"></i>
        </button>
      </div>
    </div>
  </div>

</div>