<h2 mat-dialog-title>Gestión de columnas personalizadas</h2>
<mat-dialog-content>
  <form [formGroup]="formGroup" class="override_content_flex">
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Tablas seleccionadas</mat-label>
        <mat-select formControlName="TABLA">
          @for (table of formColumnsData.TABLES_SELECTED; track table) {
            <mat-option [value]="table">{{ table }}</mat-option>
          }
        </mat-select>
        <mat-icon matSuffix>table_chart</mat-icon>
        @if (formGroup.controls['TABLA'].hasError('required')) {
          <mat-error title="El campo Tablas seleccionadas es obligatorio">
            El campo <b>Tablas seleccionadas</b> es obligatorio
          </mat-error>
        }
      </mat-form-field>
    </div>
    <div class="col-flex-2 code_table">
      {{ codeTable() }}
    </div>
    <div class="col-flex-10">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Nueva columna</mat-label>
        <input 
        matInput 
        type="text" 
        #nuevaColumna 
        formControlName="COLUMNA_NUEVA" 
        maxlength="4" 
        oninput="this.value = this.value.toUpperCase();">
        <mat-icon matSuffix>table_chart</mat-icon>
        @if (formGroup.controls['COLUMNA_NUEVA'].hasError('required')) {
          <mat-error title="El campo Nueva columna es obligatorio">
            El campo <b>Nueva columna</b> es obligatorio
          </mat-error>
        }
        @if (formGroup.controls['COLUMNA_NUEVA'].hasError('minlength')) {
          <mat-error title="El campo Nueva columna debe tener 4 caracteres">
            El campo <b>Nueva columna</b> debe tener 4 caracteres
          </mat-error>
        }
        <mat-hint align="end">{{nuevaColumna.value.length}} / 4</mat-hint>
      </mat-form-field>
    </div>
    <div class="col-flex-12">
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Descripción de la columna</mat-label>
        <textarea 
        matInput 
        type="text" 
        formControlName="DECRIPCION_COLUMNA" 
        maxlength="50"
        rows="2">
        </textarea>
        <mat-icon matSuffix>subject</mat-icon>
        @if (formGroup.controls['DECRIPCION_COLUMNA'].hasError('required')) {
          <mat-error title="El campo Nueva columna es obligatorio">
            El campo <b>Nueva columna</b> es obligatorio
          </mat-error>
        }
      </mat-form-field>
    </div>
    <div class="col-flex-12 action_columns">
      @if (dataTypeForm.TYPE_FORM === 'R') {
        <button mat-flat-button color="primary" [disabled]="formGroup.invalid || hasError" (click)="addColumn()">
          <mat-icon>save</mat-icon>
          Guardar
        </button>
      } @else {
        <button mat-flat-button color="primary" [disabled]="formGroup.invalid || hasError" (click)="updateColumn()">
          <mat-icon>save</mat-icon>
          Modificar
        </button>
      }
    </div>
  </form>
  
  <div>
    @for (tableColumn of arrTableColumns; track tableColumn; let idxTable = $index) {
      <div class="container_table">
        <div class="content_table_name">
          <mat-icon>arrow_right</mat-icon>
          <b>{{ tableColumn.TABLA }}</b>
        </div>
          
        @for (column of tableColumn.COLUMNS; track column; let idxColumn = $index) {
          <div class="content_columns">
            <div class="item_content_column"> 
              {{ column.COLUMN }}
            </div>
            <div class="item_content_option">
              <button mat-icon-button color="primary" (click)="editColumn(idxTable, idxColumn)">
                <mat-icon>edit</mat-icon>
              </button>
              <button mat-icon-button color="warn" (click)="deleteColumn(idxTable, idxColumn)" [disabled]="dataTypeForm.TYPE_FORM === 'M'">
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
        }
      </div>
    }
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">Cancelar</button>
  <button mat-button (click)="save()">Finalizar</button>
</mat-dialog-actions>