<h2 mat-dialog-title>Configuración para INPUT</h2>
<mat-dialog-content class="mat-typography">
  <div style="text-align: center; height: 84px;">
    <mat-form-field appearance="outline" class="example-tag" style="width: 50% !important;" *ngIf="formGroup.controls['type'].value !== 'file'">
      <mat-label> {{ formGroup.controls['label'].value }} </mat-label>
      <input
        matInput
        [type]="formGroup.controls['type'].value"
        [placeholder]="formGroup.controls['placeholder'].value"
        [value]="formGroup.controls['value'].value"
        [id]="formGroup.controls['id'].value"
        [name]="formGroup.controls['name'].value"
        [required]="formGroup.controls['required_reg'].value"
        [readonly]="formGroup.controls['readonly_reg'].value"
        [maxLength]="formGroup.controls['max'].value"
        [pattern]="formGroup.controls['pattern'].value"
        [disabled]="formGroup.controls['disabled_reg'].value"
      />
      <mat-icon matSuffix *ngIf="formGroup.controls['icon'].value !== ''">{{ formGroup.controls['icon'].value }}</mat-icon>
    </mat-form-field>
  </div>

  <mat-divider style="margin-bottom: 15px;"></mat-divider>

  <form [formGroup]="formGroup">
    <mat-grid-list cols="4" rowHeight="82px">
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Elemento</mat-label>
          <input matInput formControlName="tag" readonly />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Columna</mat-label>
          <mat-select value="text" formControlName="column" (ngModelChange)="changeColumn()">
            <mat-option *ngFor="let column of arr_columns" [value]="column">{{ column }}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Nombre del campo</mat-label>
          <input matInput formControlName="name" />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Identificador</mat-label>
          <input matInput formControlName="id" />
          <mat-error *ngIf="formGroup.controls['id'].errors?.['validWords']">
            Es una palabra reservada
          </mat-error>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Tipo</mat-label>
          <mat-select value="text" formControlName="type" (ngModelChange)="changeType()">
            <mat-option value="text">text</mat-option>
            <mat-option value="date">date</mat-option>
            <mat-option value="color">color</mat-option>
            <mat-option value="datetime-local">datetime-local</mat-option>
            <mat-option value="email">email</mat-option>
            <mat-option value="month">month</mat-option>
            <mat-option value="number">number</mat-option>
            <mat-option value="password">password</mat-option>
            <mat-option value="search">search</mat-option>
            <mat-option value="tel">tel</mat-option>
            <mat-option value="time">time</mat-option>
            <mat-option value="url">url</mat-option>
            <mat-option value="week">week</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Etiqueta</mat-label>
          <input matInput formControlName="label" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Placeholder</mat-label>
          <input matInput formControlName="placeholder" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Longitud</mat-label>
          <input matInput type="number" formControlName="max" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Patrón</mat-label>
          <input matInput #valuePatron formControlName="pattern" (change)="validPattern(valuePatron.value)" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Mensaje de error</mat-label>
          <input matInput formControlName="msgerror" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Valor por defecto</mat-label>
          <input matInput formControlName="value" [maxLength]="formGroup.controls['max'].value" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <mat-form-field appearance="outline">
          <mat-label>Icono</mat-label>
          <input type="text" aria-label="Number" matInput formControlName="icon" [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              <mat-icon>{{ option }}</mat-icon>
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>


    <div class="w-100" style="display: flex; flex-direction: row;">
      <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
        <mat-checkbox class="example-margin" formControlName="disabled_reg">Deshabilitar para Registro</mat-checkbox>
        <mat-checkbox class="example-margin" formControlName="disabled_mod"> Deshabilitar para Modificacion </mat-checkbox>
      </div>
      <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
        <mat-checkbox class="example-margin" formControlName="required_reg">Requerido para Registro</mat-checkbox>
        <mat-checkbox class="example-margin" formControlName="required_mod">Requerido para Modificacion</mat-checkbox>
      </div>
      <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
        <mat-checkbox class="example-margin" formControlName="readonly_reg">Solo lectura para Registro</mat-checkbox>
        <mat-checkbox class="example-margin" formControlName="readonly_mod">Solo lectura para Modificacion</mat-checkbox>
      </div>
    </div>
    <div style="float: left; display: flex; align-items: center;">
      <span style="margin-left: 20px">Columnas:</span>
      <a mat-icon-button style="margin-right: 10px; margin-left: 10px" (click)="numColumn('remove')">
        <mat-icon style="color: #3f51b5">remove</mat-icon>
      </a>
      <span>{{ formGroup.controls['num_col'].value }}</span>
      <a mat-icon-button style="margin-right: 10px; margin-left: 10px" (click)="numColumn('add')">
        <mat-icon style="color: #3f51b5">add</mat-icon>
      </a>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [mat-dialog-close]="formGroup.value" [disabled]="formGroup.invalid">
    Registrar
  </button>
</mat-dialog-actions>
