<div style="width: 400px">
  <h1 mat-dialog-title class="centre">{{ data.action }}</h1>
  <div mat-dialog-content>
    <form [formGroup]="formGroup">
      <mat-grid-list cols="12" rowHeight="80px">
        <mat-grid-tile colspan="12">
          <mat-form-field
            hintLabel="Seleccione un usuario"
            appearance="standard"
          >
            <mat-label>Usuario</mat-label>
            <mat-select formControlName="id_usuario">
              <mat-option
                *ngFor="let item of usuarios; let i = index"
                [value]="item"
                (onSelectionChange)="onSelectionChanged(item)"
              >
                {{ item.NOMBRE }} - {{ item.NUMEMPL }} ({{ item.IDUSUARIO }})
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>perm_contact_calendar</mat-icon>
            <!--          <mat-error *ngIf="id_usuario!.invalid">{{ id_usuario!.hasError("required") ? "Debe seleccionar este campo" : "" }}
                        </mat-error> -->
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12">
          <mat-form-field
            hintLabel="Seleccione un jefe directo"
            appearance="standard"
          >
            <mat-label>Jefe Directo</mat-label>
            <mat-select formControlName="id_jefe_directo">
              <mat-option *ngFor="let item of usuarios_menos" [value]="item">
                {{ item.NOMBRE }} - {{ item.NUMEMPL }} ({{ item.IDUSUARIO }})
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>perm_contact_calendar</mat-icon>
            <mat-error *ngIf="id_jefe_directo!.invalid"
              >{{
                id_jefe_directo!.hasError("required")
                  ? "Debe seleccionar este campo"
                  : ""
              }}
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12">
          <mat-form-field
            hintLabel="Seleccione un jefe sustituto"
            appearance="standard"
          >
            <mat-label>Jefe Sustituto</mat-label>
            <mat-select formControlName="id_jefe_sustituto">
              <mat-option value=""></mat-option>
              <mat-option *ngFor="let item of usuarios_menos" [value]="item">
                {{ item.NOMBRE }} - {{ item.NUMEMPL }} ({{ item.IDUSUARIO }})
              </mat-option>
            </mat-select>
            <mat-icon matSuffix>perm_contact_calendar</mat-icon>
            <mat-error *ngIf="id_jefe_sustituto!.invalid"
              >{{
                id_jefe_sustituto!.hasError("required")
                  ? "Debe seleccionar este campo"
                  : ""
              }}
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
    </form>

    <div class="centre" style="padding-top: 20px">
      <button
        mat-mini-fab
        class="mr-2"
        color="warn"
        [mat-dialog-close]="false"
        matTooltip="Cerrar"
      >
        <mat-icon>close</mat-icon>
      </button>
      <button
        mat-mini-fab
        class="secondary"
        [mat-dialog-close]="formGroup.value"
        matTooltip="Confirmar"
        [disabled]="formGroup.invalid"
      >
        <mat-icon>done</mat-icon>
      </button>
    </div>
  </div>
</div>
