<h2 mat-dialog-title>{{ titleDialog }}</h2>
<mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
<mat-dialog-content [formGroup]="formGroup">
  <mat-grid-list cols="12" rowHeight="82px">
    <mat-grid-tile colspan="7">
      <mat-form-field appearance="outline">
        <mat-label>Despacho</mat-label>
        <input matInput type="text" placeholder="Ingrese el nombre del despacho" formControlName="DESPACHO"/>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="5">
      <mat-form-field appearance="outline">
        <mat-label>Calle</mat-label>
        <input matInput type="text" placeholder="Ingrese la calle" formControlName="CALLE"/>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="4">
      <mat-form-field appearance="outline">
        <mat-label> No Exterior </mat-label>
        <input matInput type="text" placeholder="Número exterior" formControlName="NUMEROEXTERIOR"/>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="4">
      <mat-form-field appearance="outline">
        <mat-label> No Interior </mat-label>
        <input matInput type="text" placeholder="Número interior" formControlName="NUMEROINTERIOR"/>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="4">
      <mat-form-field appearance="outline">
        <mat-label> Código Postal </mat-label>
        <input matInput type="text" placeholder="Ingrese el código postal" formControlName="CODIGOPOSTAL"
          oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
          maxlength="5" (keyup)="getSuburb()"/>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="6">
      <mat-form-field appearance="outline">
        <mat-label> Colonia </mat-label>
        <mat-select formControlName="COLONIA">
          <mat-option *ngFor="let suburb of locate.SUBURB" [value]="suburb">
            {{ suburb }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="6">
      <mat-form-field appearance="outline">
        <mat-label> Municipio </mat-label>
        <input matInput type="text" placeholder="Ingrese el nombre del Municipio" formControlName="MUNICIPIO" readonly>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="6">
      <mat-form-field appearance="outline">
        <mat-label> Entidad Federativa </mat-label>
        <input matInput type="text" placeholder="Ingrese el nombre de la Entidad Federativa" formControlName="ENTIDAD" readonly>
      </mat-form-field>
    </mat-grid-tile>
    <mat-grid-tile colspan="6">
      <mat-form-field appearance="outline">
        <mat-label> País </mat-label>
        <input matInput type="text" placeholder="Ingrese el nombre del País" formControlName="PAIS" readonly>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button [disabled]="formGroup.invalid" (click)="alert(this.element.typeForm)">
    {{ this.element.typeForm === 'REG' ? 'Registrar' : 'Modificar' }}
  </button>
</mat-dialog-actions>
