<div style="width: 600px">
  <h1 mat-dialog-title class="centre">{{ data.action }}</h1>
  <div mat-dialog-content>
    <mat-grid-list cols="12" rowHeight="95px">
      <form [formGroup]="formGroup">

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>ID usuario</mat-label>
            <input matInput formControlName="id_usuario" />
            <mat-icon matSuffix>tag</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Número usuario</mat-label>
            <input matInput formControlName="numero_usuario" />
            <mat-icon matSuffix>tag</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Fecha inicial</mat-label>
            <input matInput formControlName="fecha_inicial" />
            <mat-icon matSuffix>calendar_today</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Fecha final</mat-label>
            <input matInput formControlName="fecha_final" />
            <mat-icon matSuffix>calendar_today</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Estado solicitud</mat-label>
            <input matInput formControlName="estatus" />
            <mat-icon matSuffix *ngIf="estatus!.value != 'Aprobado'">toggle_off</mat-icon>
            <mat-icon matSuffix *ngIf="estatus!.value == 'Aprobado'">toggle_on</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

<!-- 
        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Días disponibles antes de las vacaciones</mat-label>
            <input matInput formControlName="diasdispantes" />
            <mat-icon matSuffix>event_available</mat-icon>
          </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="6">
          <mat-form-field appearance="legacy">
            <mat-label>Días disponibles después de las vacaciones</mat-label>
            <input matInput formControlName="diasdispdesp" />
            <mat-icon matSuffix>event_available</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
 -->
        <mat-grid-tile colspan="12" *ngIf="estatus!.value != 'Aprobado'">
          <mat-form-field appearance="legacy">
            <mat-label>Motivo</mat-label>
            <textarea matInput formControlName="motivo"></textarea>
            <mat-icon matSuffix>description</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
      </form>
    </mat-grid-list>


    <table mat-table [dataSource]="periodo_vacacional?.value" >

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

      <ng-container matColumnDef="antes">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Días antes </th>
        <td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.DIASDISPANTES}} </td>
      </ng-container>

      <ng-container matColumnDef="despues">
        <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Días después </th>
        <td mat-cell *matCellDef="let element" style="text-align: center;"> {{element.DIASDISPDESP}} </td>
      </ng-container>
    
    
      <tr mat-header-row *matHeaderRowDef="['periodo', 'antes', 'despues']"></tr>
      <tr mat-row *matRowDef="let row; columns: ['periodo', 'antes', 'despues'];"></tr>
    </table>
  

    <div class="centre" style="padding-top: 20px">
      <button mat-raised-button class="mr-2" color="warn" [mat-dialog-close]="false">
        Cerrar
      </button>
    </div>
  </div>
</div>