<div style="width: 600px">
  <h1 mat-dialog-title class="centre">{{ data.action }}</h1>
  <div mat-dialog-content>
    <form [formGroup]="formGroup">
      <mat-grid-list cols="12" rowHeight="100px">
        <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-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>
            <input type="text" #jefe_directo aria-label="Number" matInput
              [formControl]="jefe_directo_control" [matAutocomplete]="auto" >
            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngFor="let option of filteredOptions | async; let i" [value]="option">
                {{ option }}
              </mat-option>
            </mat-autocomplete>
            <mat-icon matSuffix>perm_contact_calendar</mat-icon>
            <mat-error *ngIf="jefe_directo_control!.invalid">{{
              jefe_directo_control!.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>
            <input type="text" aria-label="Number" matInput
              [formControl]="jefe_sustituto_control" [matAutocomplete]="autoAuxiliar">
            <mat-autocomplete #autoAuxiliar="matAutocomplete">
              <mat-option value=""></mat-option>
              <mat-option *ngFor="let option of filteredOptionsAuxiliar | async; let i" [value]="option">
                {{ option }}
              </mat-option>

            </mat-autocomplete>
            <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" (click)="enviar()" matTooltip="Confirmar" [disabled]="formGroup.invalid || jefe_directo_control.invalid">
        <mat-icon>done</mat-icon>
      </button>
    </div>
  </div>
</div>