@if (props.options) {
  <ion-grid class="ion-no-padding">
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      @for (row of props.options; track row; let odd = $odd) {
        @if (row?.props) {
          <ion-row class="ion-align-self-start"
            [style.background]="odd ? 'var(--ion-background-color-card-header)' : ''">
            <ion-col size="auto" class="ion-padding ion-align-self-center">
              <ion-icon class="ion-margin-start" size="large" [name]="row.props?.icon.name" [color]="row.props?.icon.color"
              [size]="row.props?.icon.size" item-left></ion-icon>
            </ion-col>
            <ion-col>
              <ion-row class="ion-no-padding ion-align-items-center">
                <ion-col>
                  <ion-item lines="none" class="ion-full-width ion-background-transparent">
                    {{ row.props?.title }}
                  </ion-item>
                </ion-col>
                <ion-col>
                  @for (col of row.fieldGroup; track $index) {
                    @switch (col.type) {
                      @case ("toggle") {
                        <ion-item lines="none" class="ion-background-transparent">
                          <ion-toggle tabindex="0" label-placement="start" slot="end" [formControlName]="col.key"
                            (keydown.enter)="changeEditMode(col.key, form?.controls[col.key] ?? null)"
                          (ionChange)="changeEditMode(col.key,null)"></ion-toggle>
                        </ion-item>
                      }
                    }
                  }
                </ion-col>
              </ion-row>
              <ion-row class="ion-no-padding ion-align-items-center">
                @for (col of row.fieldGroup; track $index) {
                  @switch (col.type) {
                    @case ("radio-buttons") {
                      <ion-col>
                        <ion-item lines="none" class="ion-background-transparent">
                          <ion-select [formControlName]="col.key" interface="popover"
                            class="custom-ion-popover ion-background-transparent" label-placement="floating" [label]="col.name"
                            justify="start" [class.disabled]="to.disabled">
                            @for (option of col.props.options; track option.value) {
                              <ion-select-option class="ion-full-width" [value]="option.value" labelPlacement="end" justify="start">
                                {{ option.label }}
                              </ion-select-option>
                            }
                          </ion-select>
                        </ion-item>
                      </ion-col>
                    }
                    @case ("checkbox") {
                      <!-- Checkbox -->
          <ion-col class="ion-align-self-center ion-no-padding ion-no-padding-top" [ngClass]="
                              nestedGroup?.controls[col.props.disabledOnFormControl]?.value === false ? 'ion-disabled' : ''
                            " size-md="5" size-lg="5" size-sm="5" size-xs="11">
                        <ion-row>
                          <ion-col>
                            <ion-item class="ion-background-transparent" lines="none">
                              <ion-checkbox style="margin-right: 5%" class="ion-font-size-smaller" slot="start" labelPlacement="end"
                                [formControlName]="col.key" justify="start" [formlyAttributes]="col">
                                {{ col.name }}
                              </ion-checkbox>
                              <oe-help-popover-button [helpMsg]="col.props.help"></oe-help-popover-button>
                            </ion-item>
                          </ion-col>
                        </ion-row>
                      </ion-col>
                    }
                  }
                }
              </ion-row>
            </ion-col>
          </ion-row>
        }
      }
    </form>
  </ion-grid>
}