<div style="width: 400px">
  <h1 mat-dialog-title class="centre">Cancelación de Vacaciones</h1>
  <div mat-dialog-content>
    <form [formGroup]="formGroup">
      <mat-grid-list cols="12" rowHeight="80px">
        <mat-grid-tile colspan="12">
          <mat-form-field appearance="standard">
            <mat-label>Solicitud</mat-label>
            <input matInput formControlName="IDSOLICITUD"  />
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12">
          <mat-form-field appearance="standard">
            <mat-label>Motivo de la Cancelación</mat-label>
            <textarea
              matInput
              placeholder="Ingrese el motivo de la cancelación"
              formControlName="motivo"
              required
              rows="1"
            ></textarea>
            <mat-error *ngIf="motivo?.invalid"
              >{{
                motivo!.hasError("required") ? "Debe ingresar este campo" : ""
              }}
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
    </form>

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

      <button
        mat-raised-button
        class="secondary mr-3"
        [mat-dialog-close]="formGroup.value"
        [disabled]="formGroup.invalid"
      >
        Confirmar cancelación
      </button>
    </div>
  </div>
</div>
