<div style="width: 800px">
  <h1 mat-dialog-title class="centre">
    Detalles de Días Vacacionales Aplicables
  </h1>
  <div mat-dialog-content>
    <mat-card class="card-normal mat-elevation-z2" id="card-personalizado">
      <table
        *ngIf="dataSource.data.length != 0"
        mat-table
        style="font-size: 25pt;"
        [dataSource]="dataSource"
        class="centre animated fadeIn"
      >
        <ng-container matColumnDef="dias_vacacionales_anio">
          <th mat-header-cell *matHeaderCellDef class="centre">
            Año para las Vacaciones Aplicables
          </th>
          <td mat-cell *matCellDef="let element">{{ element.anio }}</td>
        </ng-container>
        <ng-container matColumnDef="dias_vacacionales">
          <th mat-header-cell *matHeaderCellDef class="centre">
            Días para las Vacaciones Aplicables
          </th>
          <td mat-cell *matCellDef="let element">{{ element.dias }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5]"
        showFirstLastButtons
        aria-label="Seleccione"
      >
      </mat-paginator>
    </mat-card>
    <div class="centre">
      <button
        color="warn"
        mat-mini-fab
        class="mr-2"
        [mat-dialog-close]="false"
        matTooltip="Cerrar"
      >
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </div>
</div>
