<!-- <h2 mat-dialog-title style="text-align: center">{{ name_form }}</h2> -->
<mat-dialog-content style="padding: 0;">
  <div class="is-loading" *ngIf="isLoading">
    <mat-spinner></mat-spinner>
    <h1>Cargando...</h1>
  </div>
  <!-- CONTENT -->
  <mat-stepper [linear]="true" #stepper class="animated fadeIn" *ngIf="!isLoading">
    <mat-step *ngFor="let field of fields; let index_field = index" editable="">
      <ng-template matStepLabel>{{ field.step }}</ng-template>
      <mat-grid-list [cols]="field.num_cols" rowHeight="82px">
        <mat-grid-tile *ngFor="let form of field.form; let index_form = index" [colspan]="form.num_col" [rowspan]="form.num_row">
          <!-- INPUT -->
          <mat-form-field appearance="outline" class="color-tag" *ngIf="form.tag == 'input' && form.type !== 'date' && form.type !== 'file'">
            <mat-label> {{ form.label }} </mat-label>
            <input matInput [(ngModel)]="model[index_field][index_form].value" [type]="form.type" [placeholder]="form.placeholder"
              [value]="form.value" [id]="form.id" [name]="form.name" [required]="form.required" [readonly]="form.readonly" [maxLength]="form.max"
              [pattern]="form.pattern" [disabled]="form.disabled" />
            <mat-icon matSuffix *ngIf="form.icon !== null">{{ form.icon }}</mat-icon>
          </mat-form-field>
          <div class="mat-form-field example-tag ng-tns-c115-71 mat-primary mat-form-field-type-mat-input mat-form-field-appearance-standard
            mat-form-field-can-float mat-form-field-has-label ng-star-inserted mat-form-field-should-float mat-focused"
            ng-reflect- style="width: 100% !important;" *ngIf="form.tag == 'input' && form.type === 'file'">
            <div class="mat-form-field-wrapper ng-tns-c115-71">
              <div class="mat-form-field-flex ng-tns-c115-71">
                <div class="mat-form-field-infix ng-tns-c115-71">
                  <input class="mat-input-element mat-form-field-autofill-control ng-tns-c115-71 cdk-text-field-autofill-monitored" type="file"
                    ng-reflect-type="text" ng-reflect-required="false" ng-reflect-readonly="false" maxlength="45" ng-reflect-disabled="false"
                    id="mat-input-10" aria-invalid="false" aria-required="false" style="font-size: 7.8pt;" [id]="form.id" [name]="form.name"
                    [required]="form.required" [accept]="form.accept_file" (change)="getDataFile($event, index_field, index_form)">
                  <span class="mat-form-field-label-wrapper ng-tns-c115-71">
                    <label class="mat-form-field-label ng-tns-c115-71 mat-empty mat-form-field-empty ng-star-inserted" ng-reflect-disabled="true"
                      id="mat-form-field-label-31" ng-reflect-ng-switch="true" for="mat-input-10" aria-owns="mat-input-10">
                      <mat-label class="ng-tns-c115-71 ng-star-inserted"> {{ form.label }} </mat-label>
                    </label>
                  </span>
                </div>
                <div class="mat-form-field-suffix ng-tns-c115-148 ng-star-inserted" *ngIf="form.icon !== null">
                  <mat-icon _ngcontent-tyd-c287="" role="img" matsuffix="" matSuffix class="mat-icon notranslate material-icons mat-icon-no-color
                    ng-tns-c115-148 ng-star-inserted" aria-hidden="true" data-mat-icon-type="font"> {{ form.icon }} </mat-icon>
                </div>
              </div>
              <div class="mat-form-field-underline ng-tns-c115-71 ng-star-inserted"><span class="mat-form-field-ripple ng-tns-c115-71"></span></div>
              <div class="mat-form-field-subscript-wrapper ng-tns-c115-71" ng-reflect-ng-switch="hint">
                <div class="mat-form-field-hint-wrapper ng-tns-c115-71 ng-trigger ng-trigger-transitionMessages ng-star-inserted" style="opacity: 1;
                  transform: translateY(0%);"><div class="mat-form-field-hint-spacer ng-tns-c115-71"></div>
                </div>
              </div>
            </div>
          </div>
          <mat-form-field appearance="outline" class="color-tag" *ngIf="form.tag == 'input' && form.type === 'date'">
            <mat-label> {{ form.label }} </mat-label>
            <input matInput [matDatepicker]="picker" [(ngModel)]="model[index_field][index_form].value">
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-icon matSuffix *ngIf="form.icon !== null">{{form.icon}}</mat-icon>
          </mat-form-field>

          <!-- SELECT NORMAL -->
          <mat-form-field appearance="outline" class="color-tag" *ngIf="form.tag == 'select' && !form.multi_select && !form.group_select">
            <mat-label>{{ form.label }}</mat-label>
            <mat-select [(ngModel)]="model[index_field][index_form].value" [disabled]="form.disabled" [value]="form.value"
              [required]="form.required" [id]="form.id" [attr.data-name]="form.name">
              <mat-option *ngIf="!form.required">-- Niniguno --</mat-option>
              <mat-option *ngFor="let item of form.data_select" [value]="item.valor">{{ item.opcion }}</mat-option>
            </mat-select>
            <mat-icon matSuffix *ngIf="form.icon !== null">{{ form.icon }}</mat-icon>
          </mat-form-field>

          <!-- SELECT MULTIPLE -->
          <mat-form-field appearance="outline" class="color-tag" *ngIf="form.tag == 'select' && form.multi_select">
            <mat-label>{{ form.label }}</mat-label>
            <mat-select multiple [(ngModel)]="model[index_field][index_form].value" [disabled]="form.disabled" [value]="form.value"
              [required]="form.required" [id]="form.id">
              <mat-option *ngIf="!form.required">-- Niniguno --</mat-option>
              <mat-option *ngFor="let item of form.data_select" [value]="item.valor">{{ item.opcion }}</mat-option>
            </mat-select>
            <mat-icon matSuffix *ngIf="form.icon !== null">{{ form.icon }}</mat-icon>
          </mat-form-field>

          <!-- SELECT GRUPO -->
          <mat-form-field appearance="outline" class="color-tag" *ngIf="form.tag == 'select' && form.group_select">
            <mat-label>{{ form.label }}</mat-label>
            <mat-select [(ngModel)]="model[index_field][index_form].value" [disabled]="form.disabled" [value]="form.value"
              [required]="form.required" [id]="form.id">
              <mat-option *ngIf="!form.required">-- Niniguno --</mat-option>
              <mat-optgroup *ngFor="let grupos of form.data_select" [label]="grupos.grupo">
                <mat-option *ngFor="let datos of grupos.datos" [value]="datos.valor">{{ datos.opcion }}</mat-option>
              </mat-optgroup>
            </mat-select>
            <mat-icon matSuffix *ngIf="form.icon !== null">{{ form.icon }}</mat-icon>
          </mat-form-field>

          <!-- CHECKBOX -->
          <div style="text-align: center" *ngIf="form.tag == 'checkbox' && !form.multi_check">
            <mat-checkbox [(ngModel)]="model[index_field][index_form].value" [name]="form.name" [disabled]="form.disabled" [id]="form.id">
              {{ form.label }}
            </mat-checkbox>
          </div>

          <!-- CHECKBOX MULTIPLE -->
          <section class="example-section" *ngIf="form.tag == 'checkbox' && form.multi_check">
            <span class="example-list-section">
              <mat-checkbox class="example-margin">{{ form.label }}</mat-checkbox>
            </span>
            <span class="example-list-section">
              <ul><li *ngFor="let item of form.data_check"><mat-checkbox>{{ item.name }}</mat-checkbox></li></ul>
            </span>
          </section>

          <!-- RADIO -->
          <div *ngIf="form.tag == 'radio'">
            <mat-radio-group [(ngModel)]="model[index_field][index_form].value" [id]="form.id" [name]="form.name">
              <mat-radio-button *ngFor="let item of form.multi_radio" [value]="item.value"> {{ item.option }} </mat-radio-button>
            </mat-radio-group>
          </div>

          <!-- TEXTAREA -->
          <mat-form-field appearance="outline" *ngIf="form.tag == 'textarea'">
            <mat-label>{{ form.label }}</mat-label>
            <textarea matInput [(ngModel)]="model[index_field][index_form].value" [type]="form.type" [placeholder]="form.placeholder"
              [value]="form.value" [id]="form.id" [name]="form.name" [required]="form.required" [readonly]="form.readonly" [maxLength]="form.max"
              [disabled]="form.disabled" [style.height.px]="form.height"></textarea>
            <mat-icon matSuffix *ngIf="form.icon !== null"> {{ form.icon }}</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
      <div style="display: flex; justify-content: flex-end;">
        <button mat-button color="warn" mat-dialog-close>Cancelar</button>
        <div *ngIf="field.multi_data">
          <button mat-button color="accent" (click)="addDataTable(index_field)">Agregar a la tabla</button>
          <button mat-button color="info" style="margin-left: 10px;" (click)="showMultidataRegister(index_field)">Ver tabla</button>
        </div>
        <div>
          <button mat-button color="success" style="margin-left: 10px;" *ngIf="index_field > 0" matStepperPrevious>Anterior</button>
          <button mat-button color="primary" style="margin-left: 10px;" *ngIf="index_field < fields.length - 1"
            (click)="registerDataStep(index_field, stepper, field.multi_data)">Siguiente
          </button>
          <button mat-button color="primary" style="margin-left: 10px;" *ngIf="index_field == fields.length - 1"
            (click)="registerDataStep(index_field, stepper, field.multi_data)">
            Registrar
          </button>
        </div>
      </div>
    </mat-step>
  </mat-stepper>
</mat-dialog-content>
