<ion-header>
  <ion-toolbar class="ion-justify-content-center" color="primary">
    <ion-title>{{ title }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close" style="color: var(--ion-title-color);"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content style="height: 30vh;">
  <ion-radio-group [value]="selectedOption" (ionChange)="handleChange($event)" [compareWith]="compareOption"
    allowEmptySelection>
    <ion-list>
      @for (item of optionLoader.state$().options; track item.value) {
        <ion-item>
          @let disabled = item.state?.disabled;
        <ion-radio slot="start" [value]="item.value" labelPlacement="end" [disabled]="disabled">
          <ion-label>
            <h2> {{ item.name }} </h2>
        @if (item.detail) {
          <p> {{ item.detail }} </p>
        }
        @let disabledText = item.state?.text;
              @if (disabled && disabledText) {
          {{disabledText}}
        }
        </ion-label>
        </ion-radio>
        </ion-item>
        }
    </ion-list>
    <ion-infinite-scroll>
      <ion-grid class="ion-no-padding ion-justify-content-space-betweeen" style="align-items: center">
        <ion-row>
          <ion-col>
            @if(optionLoader.state$().loading) {
              <ion-grid>
                <ion-row style="height: 6vh;">
                  <ion-col>
                    <ngx-spinner [name]="spinnerId"></ngx-spinner>
                  </ion-col>
                </ion-row>
              </ion-grid>
            }
            <ion-grid>
              <ion-row class="ion-justify-self-center">
                <ion-col>
                  <ion-label>
                    @if(optionLoader.state$().loading) {
                      {{loadingText}}
                    } @else if(optionLoader.state$().options.length === 0) {
                      {{missingOptionsText}}
                    }
                  </ion-label>
                </ion-col>
              </ion-row>
              <ion-row class="ion-justify-self-center ion-padding-top">
                @if(!optionLoader.state$().loading) {
                  <ion-button (click)="triggerSearch()">
                    <ion-icon slot="end" name="refresh-outline"></ion-icon>
                    {{retryLoadingText}}
                  </ion-button>
                }
              </ion-row>
            </ion-grid>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-infinite-scroll>
  </ion-radio-group>
</ion-content>


<ion-grid>
  <ion-row>
    <ion-col size="12" class="ion-padding-top">
      <oe-flat-button (click)="submitSelect()">
        <ion-text translate>
          GENERAL.OK
        </ion-text>
      </oe-flat-button>
      <oe-flat-button (click)="modalCtrl.dismiss()" fill="outline">
        <ion-text translate>
          GENERAL.CANCEL
        </ion-text>
      </oe-flat-button>
    </ion-col>
  </ion-row>
</ion-grid>
