<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="75px">

        <mat-grid-tile colspan="12">
          <mat-form-field appearance="standard">
            <mat-label>Nombre unidad</mat-label>
            <input
              matInput
              placeholder="Ingrese el nombre de la unidad de negocio"
              formControlName="nombre"
              required
            />
            <mat-icon matSuffix>business</mat-icon>
            <mat-error *ngIf="nombre!.invalid"
              >{{
                nombre!.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>R.F.C</mat-label>
            <input
              matInput
              placeholder="ROPL951201"
              formControlName="rfc_unidad"
              required
              maxlength="13"
              minlength="12"
              class="mayusculas"
            />
            <mat-icon matSuffix>perm_contact_calendar</mat-icon>
            <mat-error *ngIf="rfc_unidad!.invalid"
              >{{
                rfc_unidad!.hasError("min")
                  ? "Máximo 13 caracteres"
                  : "Mínimo 12 caracteres"
              }}
            </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>
