<h2 mat-dialog-title style="text-align: center">Registro de Proveedores</h2>
<mat-dialog-content class="mat-typography">
  <mat-stepper linear #stepper>
    <mat-step *ngFor="let field of json.fields; let index_field = index">
      <ng-template matStepLabel>{{ field.step }}</ng-template>
      <mat-grid-list [cols]="field.num_cols" rowHeight="70px" id="id_inpt">
        <mat-grid-tile *ngFor="let form of field.form; let index_form = index" [colspan]="form.num_col"
          [rowspan]="form.num_row">

          <mat-form-field  *ngIf="form.tag == 'input' && form.type != 'file'">
            <mat-label> {{ form.label }} </mat-label>
            <input matInput [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 !== ''">{{ form.icon }}</mat-icon>
          </mat-form-field>
          <div *ngIf="form.type === 'file'"
            style="width: 100%; flex-direction: column; display: inline-flex; padding-bottom: 1.34375em;">
            <div [id]="form.id + index_form" class="btnFile" (click)="getFile(form.id)">
              <mat-icon matSuffix style="margin-right: 5px;">{{ form.icon }}</mat-icon> {{ form.label }}
            </div>
            <input [id]="form.id" [name]="form.name" type="file" value="upload" #inputFile
              (change)="sub(inputFile, form.label, form.id + index_form )" [accept]="form.accept_file"
              [required]="form.required" />
          </div>

          <mat-form-field 
            *ngIf="form.tag == 'select' && !form.multi_select && !form.group_select">
            <mat-label>{{ form.label }}</mat-label>

            <mat-select [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 !== ''">{{
              form.icon
              }}</mat-icon>
          </mat-form-field>

          <mat-form-field  *ngIf="form.tag == 'select' && form.multi_select">
            <mat-label>{{ form.label }}</mat-label>
            <mat-select multiple [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]="form.valor">
                {{ item.opcion }}
              </mat-option>
            </mat-select>
            <mat-icon matSuffix *ngIf="form.icon !== ''">{{
              form.icon
              }}</mat-icon>
          </mat-form-field>

          <mat-form-field  *ngIf="form.tag == 'select' && form.group_select">
            <mat-label>{{ form.label }}</mat-label>
            <mat-select [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 !== ''">{{
              form.icon
              }}</mat-icon>
          </mat-form-field>

          <div style="text-align: center" *ngIf="form.tag == 'checkbox' && !form.multi_check">
            <mat-checkbox [name]="form.name" [disabled]="form.disabled" [id]="form.id">
              {{ form.label }}
            </mat-checkbox>
          </div>

          <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>

          <div *ngIf="form.tag == 'radio'">
            <mat-radio-group [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>

          <mat-form-field  *ngIf="form.tag == 'textarea'">
            <mat-label>{{ form.label }}</mat-label>
            <textarea matInput [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 !== ''">{{
              form.icon
              }}</mat-icon>
          </mat-form-field>
        </mat-grid-tile>
      </mat-grid-list>
    </mat-step>
  </mat-stepper>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="warn" mat-dialog-close cdkFocusInitial>Cancelar</button>
</mat-dialog-actions>