<mat-card class="card-small mat-elevation-z8 animated fadeIn fast centre">
  <mat-grid-list cols="12" rowHeight="85px">
    <mat-grid-tile colspan="12">
      <mat-card-title>Solicitud de Vacaciones</mat-card-title>
    </mat-grid-tile>

    <form [formGroup]="formGroup">
      <mat-grid-tile colspan="12">
        <mat-form-field appearance="standard">
          <mat-label>Número de Empleado</mat-label>
          <input
            matInput
            placeholder="Ingrese el nombre"
            formControlName="numero_empleado"
          />
          <mat-icon matSuffix>tag</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="standard">
          <mat-label>Fechas solicitadas </mat-label>
          <mat-date-range-input [min]="minDate" [rangePicker]="picker" required>
            <input
              matStartDate
              placeholder="Fecha Inicial"
              [value]="fecha_inicio"
              formControlName="fecha_inicio"
            />

            <input
              matEndDate
              placeholder="Fecha Final"
              [value]="fecha_fin"
              formControlName="fecha_fin"
            />
          </mat-date-range-input>
          <mat-datepicker-toggle
            matSuffix
            [for]="picker"
          ></mat-datepicker-toggle>
          <mat-date-range-picker #picker></mat-date-range-picker>
          <mat-error *ngIf="fecha_inicio!.invalid && fecha_fin!.invalid"
            >{{
              fecha_inicio!.hasError("required")
                ? "Debe ingresar este campo"
                : ""
            }}
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <mat-form-field appearance="standard">
          <mat-label>Días Vacacionales</mat-label>
          <input
            matInput
            type="number"
            min="1"
            formControlName="dias_vacacionales"
            [value]="calcular_dias()"
            (keyup)="applyFilter($event)"
          />
          <mat-icon matSuffix>date_range</mat-icon>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="12">
        <button
          mat-raised-button
          (click)="openDialog()"
          class="secondary"
          [disabled]="formGroup.invalid || envioForm.status"
        >
          {{ envioForm.text }}
        </button>
      </mat-grid-tile>
    </form>
  </mat-grid-list>
</mat-card>
