<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>Historial de Solicitudes</mat-card-title>
    </mat-grid-tile>
    <mat-grid-tile colspan="4" class="card-title">
      <mat-form-field appearance="standard" *ngIf="isAdmin">
        <mat-label>Filtro</mat-label>
        <mat-select>
          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial" selected >Mi historial [{{ usuario_session.NOMBRE}}]</mat-option>
          <mat-option (click)="obtenerTodosHistorial()" value="Mi Historial">Todos</mat-option>
          <mat-option style="background-color: #071d49; color: #FFF; cursor: default;">Usuarios</mat-option>
          <mat-option
            *ngFor="let item of subordinados; let i = index"
            [value]="item"
            (click)="obtenerHistorialSubordinado(item.IDUSUARIO)"
          >
            {{ item.USUARIO }} ({{ item.IDUSUARIO }})
          </mat-option>
        </mat-select>
        <mat-icon matSuffix>perm_contact_calendar</mat-icon>
      </mat-form-field>

      <mat-form-field appearance="standard" *ngIf="!isAdmin">
        <mat-label>Filtro</mat-label>
        <mat-select>
          <mat-option (click)="obtenerMiHistorial()" value="Mi Historial">Mi historial [{{ usuario_session.NOMBRE}}]</mat-option>
          <mat-option style="background-color: #071d49; color: #FFF; cursor: default;">Usuarios</mat-option>
          <mat-option
            (click)="obtenerHistorialSubordinado( obtenerIDUsuario(item.USUARIO) )"
            *ngFor="let item of subordinados; let i = index"
            [value]="item"
          >
          {{ item.USUARIO }}
          </mat-option>
        </mat-select>
        <mat-icon matSuffix>perm_contact_calendar</mat-icon>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile
      colspan="8"
      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>

  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

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

    <ng-container matColumnDef="fecha_inicial">
      <th mat-header-cell *matHeaderCellDef>Fecha inicial</th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHAINICIAL | date: "dd-MM-yyyy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="fecha_final">
      <th mat-header-cell *matHeaderCellDef>Fecha final</th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHAFINAL | date: "dd-MM-yyyy" }}
      </td>
    </ng-container>

    <ng-container matColumnDef="estatus">
      <th mat-header-cell *matHeaderCellDef>Estado solicitud</th>
      <td mat-cell *matCellDef="let element">
        {{ element.ESTATUS }}
      </td>
    </ng-container>

    <ng-container matColumnDef="periodovacacional">
      <th mat-header-cell *matHeaderCellDef>Periodo vacacional</th>
      <td mat-cell *matCellDef="let element">
        {{ formatoFechaPeriodo(element.PERIODOVACACIONAL) }}
      </td>
    </ng-container>

    <ng-container matColumnDef="id_usuario">
      <th mat-header-cell *matHeaderCellDef>ID usuario</th>
      <td mat-cell *matCellDef="let element">
        {{ element.IDUSUARIO }}
      </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="Detalles solicitud"
          (click)="obtenerDetalleSolicitud(element)"
        >
          <mat-icon>remove_red_eye</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>
