<h2 mat-dialog-title>Configuración para CHECKBOX</h2>
<mat-dialog-content class="mat-typography">
  <div>
    <div style="text-align: center" *ngIf="formGroup.controls['multi_check'].value">
      <mat-checkbox [name]="formGroup.controls['name'].value" [disabled]="formGroup.controls['disabled_reg'].value" [id]="formGroup.controls['id'].value">{{ formGroup.controls['label'].value }}</mat-checkbox>
    </div>

    <section class="example-section" *ngIf="formGroup.controls['multi_check'].value">
      <span class="example-list-section">
        <mat-checkbox class="example-margin" [name]="formGroup.controls['name'].value" [disabled]="formGroup.controls['disabled_reg'].value" [id]="formGroup.controls['id'].value" [indeterminate]="false">
          {{ formGroup.controls['label'].value }}
        </mat-checkbox>
      </span>
      <span class="example-list-section">
        <ul>
          <li *ngFor="let item of formGroup.controls['data_check'].value">
            <mat-checkbox> {{ item.name }} </mat-checkbox>
          </li>
        </ul>
      </span>
    </section>
  </div>

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

  <form [formGroup]="formGroup">
    <mat-grid-list cols="6" rowHeight="82px">
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Elemento</mat-label>
          <input matInput formControlName="tag" readonly />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <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="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Nombre del campo</mat-label>
          <input matInput formControlName="name" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <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="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Etiqueta</mat-label>
          <input matInput formControlName="label" />
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>

    <div style="display: flex; align-items: center; flex-direction: column;">
      <div>
        <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>
        <mat-checkbox class="example-margin" formControlName="multi_check" (click)="removeCheck()">Multiple</mat-checkbox>
      </div>
      <div style="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>
    </div>

    <mat-grid-list cols="5" rowHeight="82px">
      <mat-grid-tile colspan="4">
        <mat-form-field appearance="outline" style="width: 100%">
          <mat-label>Opcion</mat-label>
          <input matInput #opcionCB [disabled]="formGroup.controls['multi_check'].value" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <a mat-mini-fab color="primary" [disabled]="formGroup.controls['multi_check'].value" style="box-shadow: none; margin-bottom: auto; margin-top: 10px;"
          matTooltip="Agregar campo" (click)="addOpcionCB(opcionCB.value)">
          <mat-icon>add</mat-icon>
        </a>
      </mat-grid-tile>
    </mat-grid-list>
  </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>
