<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
  <mat-grid-list cols="12" rowHeight="55px" class="card-title">
    <mat-grid-tile colspan="12">
      <mat-card-title>Cancelación de Vacaciones</mat-card-title>
    </mat-grid-tile>
    <mat-grid-tile colspan="12" class="card-title"  *ngIf="dataSource.data.length != 0">
      <mat-form-field appearance="legacy" class="searcher">
        <mat-label>Buscador</mat-label>
        <input
          matInput
          placeholder="Ingrese lo que necesite buscar"
          (keyup)="applyFilter($event)"
        />
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>

  <div *ngIf="data_empty" 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>

  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>
  <table
    *ngIf="!data_empty"
    mat-table
    [dataSource]="dataSource"
    class="animated fadeIn"
  >
    <ng-container matColumnDef="IDSOLICITUD">
      <th mat-header-cell *matHeaderCellDef>
        Número de Solicitud
      </th>
      <td mat-cell *matCellDef="let element">{{ element.IDSOLICITUD }}</td>
    </ng-container>

    <ng-container matColumnDef="NOMBREEMPLEADO">
      <th mat-header-cell *matHeaderCellDef>Solicitante</th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBREEMPLEADO }}
      </td>
    </ng-container>

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

    <ng-container matColumnDef="FECHAFIN">
      <th mat-header-cell *matHeaderCellDef>Fecha Final</th>
      <td mat-cell *matCellDef="let element">
        {{ formatDate(element.FECHAFIN) }}
      </td>
    </ng-container>

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

    <ng-container matColumnDef="accion">
      <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-1 secondary"
          matTooltip="Ver solicitud"
          (click)="openDialogVerSolicitud(element)"
        >
          <mat-icon>remove_red_eye</mat-icon>
        </button>
        <button
          mat-mini-fab
          color="warn"
          class="mr-1"
          [disabled]="isSend"
          matTooltip="Cancelacion"
          (click)="openDialogCancelar(element)"
        >
          <mat-icon>cancel</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>
