<form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="form" class="containerPagina">

  <mat-tab-group [(selectedIndex)]="selectedTabIndex">
    <mat-tab *ngFor="let tab of configuration.tabs" [label]="tab.title">

      <div class="grid" [style.gridTemplateColumns]="'repeat(' + tab.columns + ', 1fr)'" style="gap: 16px; padding: 16px;">
        <div *ngFor="let el of tab.elements" class="form-element"
             [style.gridColumnStart]="el.position.col + 1"
             [style.gridRowStart]="el.position.row + 1">

          <label [for]="el.element.name">{{ el.element.label }}</label>

          <input *ngIf="['text', 'email', 'date', 'number'].includes(el.element.type)"
                 [attr.type]="el.element.type"
                 [formControlName]="el.element.name"
                 [attr.placeholder]="el.element.placeholder"
                 class="input-field" />

          <textarea *ngIf="el.element.type === 'textarea'"
                    [formControlName]="el.element.name"
                    [attr.placeholder]="el.element.placeholder"
                    class="textarea-field"></textarea>

          <select *ngIf="el.element.type === 'select'" [formControlName]="el.element.name" class="select-field">
            <option *ngFor="let option of el.element.options" [value]="option">{{ option }}</option>
          </select>

          <div *ngIf="el.element.type === 'radio'" class="radio-group">
            <label *ngFor="let option of el.element.options" class="radio-label">
              <input type="radio" [formControlName]="el.element.name" [value]="option" /> {{ option }}
            </label>
          </div>

          <div *ngIf="el.element.type === 'checkbox'" class="checkbox-group">
            <input type="checkbox" [formControlName]="el.element.name" /> {{ el.element.label }}
          </div>

          <!-- Validaciones simples -->
          <div class="error" *ngIf="form.controls[el.element.name].invalid && form.controls[el.element.name].touched">
            <small *ngIf="form.controls[el.element.name].errors?.['required']">{{ el.element.label }} es requerido.</small>
          </div>

        </div>
      </div>

    </mat-tab>
  </mat-tab-group>

  <div class="button-container">
    <button type="submit" [disabled]="form.invalid" class="submit-button">Enviar</button>
  </div>

</form>
