<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
  <mat-card-title class="mat-card-title centre"
    >Aprobación de vacaciones</mat-card-title
  >
  <div class="mt-5" *ngIf="isLoading">
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  </div>
  <ng-template [ngIf]="!isLoading">
    <mat-grid-list cols="12" rowHeight="55px" class="card-title mb-5">
      <mat-grid-tile colspan="12" class="card-title mt-5">
        <mat-form-field appearance="legacy" class="searcher">
          <mat-label>Buscador</mat-label>
          <input
            matInput
            placeholder="Ingrese palabras claves"
            (keyup)="applyFilter($event)"
          />
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>
    <br />
  </ng-template>

  <div *ngIf="solicitudes.length == 0 && !isLoading" class="data-empty">
    No hay datos registrados
  </div>

  <div class="mt-5 centre" *ngIf="isSend">
    <mat-progress-bar mode="query" class="primary"></mat-progress-bar>
    <p class="text-secondary">Enviando correo al empleado...</p>
    <mat-divider></mat-divider>
  </div>

  <table
    *ngIf="solicitudes.length != 0"
    mat-table
    [dataSource]="dataSource"
    class="animated fadeIn"
  >
    <ng-container matColumnDef="#">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let element; let i = index">
        <b>{{ i + +1 }}</b>
      </td>
    </ng-container>

    <ng-container matColumnDef="no_solicitud">
      <th mat-header-cell *matHeaderCellDef>Número de Solicitud</th>
      <td mat-cell *matCellDef="let element">{{ element.IDSOLICITUD }}</td>
    </ng-container>

    <ng-container matColumnDef="no_empleado">
      <th mat-header-cell *matHeaderCellDef>Número de Empleado</th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBREEMPLEADO }}
      </td>
    </ng-container>

    <ng-container matColumnDef="dias_solicitados">
      <th mat-header-cell *matHeaderCellDef>Días Solicitados</th>
      <td mat-cell *matCellDef="let element">
        {{
          element.NUMERODIAS > 1
            ? element.NUMERODIAS + " días"
            : element.NUMERODIAS + " día"
        }}
      </td>
    </ng-container>

    <ng-container matColumnDef="fecha_inicio">
      <th mat-header-cell *matHeaderCellDef>Fecha Inicio</th>
      <td mat-cell *matCellDef="let element">
        {{ formatoFecha(element.FECHAINICIO) }}
      </td>
    </ng-container>

    <ng-container matColumnDef="fecha_fin">
      <th mat-header-cell *matHeaderCellDef>Fecha Fin</th>
      <td mat-cell *matCellDef="let element">
        {{ formatoFecha(element.FECHAINICIO) }}
      </td>
    </ng-container>

    <ng-container matColumnDef="acciones">
      <th mat-header-cell *matHeaderCellDef class="centre">Acciones</th>
      <td mat-cell *matCellDef="let element" class="centre table-action">
        <button
          mat-mini-fab
          class="mr-2 secondary"
          matTooltip="Ver información"
          (click)="openDialogInformacion(element)"
        >
          <mat-icon>visibility</mat-icon>
        </button>
        <button
          mat-mini-fab
          class="mr-2 success"
          matTooltip="Aprobar vacaciones"
          [disabled]="isSend"
          (click)="openDialogAprobacion(element)"
        >
          <mat-icon>done</mat-icon>
        </button>
        <button
          mat-mini-fab
          color="warn"
          class="mr-2"
          matTooltip="Rechazar vacaciones"
          [disabled]="isSend"
          (click)="openDialogForm('Rechazar vacaciones', element)"
        >
          <mat-icon>clear</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <mat-paginator
    [pageSizeOptions]="[10, 20, 50]"
    showFirstLastButtons
    aria-label="Seleccione"
  >
  </mat-paginator>
</mat-card>
