<ion-header>
  <ion-toolbar class="ion-justify-content-center" color="primary">
    @if (behaviour !== 0) {
      <ion-title translate>EDGE.CONFIG.APP.KEY.USE_KEY</ion-title>
    }
    @if (behaviour === 0) {
      <ion-title translate>EDGE.CONFIG.APP.KEY.REGISTER_KEY</ion-title>
    }
    <ion-buttons slot="end">
      <ion-button (click)="modalCtrl.dismiss()">
        <ion-icon name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<div class="inner-content">
  <ngx-spinner [name]="spinnerId"></ngx-spinner>
  <ion-grid>
    <ion-row>
      <ion-col size="12" translate> EDGE.CONFIG.APP.KEY.ENTER_KEY </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size="12">
        <formly-form [form]="form" [fields]="fields" [model]="model" [options]="options"></formly-form>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="4">
            <ion-button (click)="modalCtrl.dismiss()" style="display: flex" translate> GENERAL.CANCEL </ion-button>
          </ion-col>
          <ion-col size="12" size-md="8">
            @if (!isKeyValid()) {
              <ion-button (click)="validateKey()" [disabled]="form.invalid" style="display: flex" translate> EDGE.CONFIG.APP.KEY.VALIDATE_KEY </ion-button>
            }
            @if (isKeyValid()) {
              <ion-button (click)="onClickCreateApp(route)" style="display: flex">
                @switch (behaviour) {
                  <!-- REGISTER -->
                  @case (0) {
                    <ion-label>{{ "EDGE.CONFIG.APP.KEY.REGISTER_KEY" | translate }}</ion-label>
                  }
                  <!-- NAVIGATE -->
                  @case (1) {
                    <ion-label>{{ "EDGE.CONFIG.APP.KEY.USE_KEY" | translate }}</ion-label>
                  }
                  <!-- SELECT -->
                  @case (2) {
                    <ion-label>{{ "EDGE.CONFIG.APP.KEY.USE_KEY" | translate }}</ion-label>
                  }
                }
              </ion-button>
            }
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-row>
  </ion-grid>
</div>
