<c8y-title>{{ 'Single sign-on' | translate }}</c8y-title>
<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Settings' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'cog'"
    [label]="'Single sign-on' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    type="button"
    (click)="loadSsoConfiguration()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading$ | async }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form hidden-xs"
>
  <div
    class="form-group d-flex m-b-0"
    title="{{ 'Template' | translate }}"
  >
    <label
      class="control-label"
      for="template"
    >
      {{ 'Template' | translate }}
    </label>
    <div class="c8y-select-wrapper">
      @if (ssoConfiguration) {
        <select
          class="form-control"
          id="template"
          name="template"
          [(ngModel)]="ssoConfiguration.template"
        >
          @for (templateType of templateTypeConfig | keyvalue; track templateType) {
            <option [ngValue]="templateType.key">
              {{ templateType.value.label | translate }}
            </option>
          }
        </select>
      }
      <span></span>
    </div>
  </div>
</c8y-action-bar-item>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <form
      class="card card--fullpage"
      #ssoConfigurationForm="ngForm"
      novalidate
    >
      <div class="card-header separator">
        <div class="card-title">
          {{ 'Single sign-on' | translate }}
        </div>
      </div>

      <div class="inner-scroll">
        @if (ssoConfiguration) {
          <div class="card-block p-0">
            @if (ssoConfiguration.template === templateType.CUSTOM) {
              <c8y-custom-template
                [ssoConfiguration]="ssoConfiguration"
                [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
                (ssoConfigurationChange)="save($event)"
                [apps]="apps"
                [groups]="groups"
                [inventoryRoles]="inventoryRoles"
              ></c8y-custom-template>
            }
            @if (ssoConfiguration.template === templateType.AZURE) {
              <c8y-aad-template
                [ssoConfiguration]="ssoConfiguration"
                [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
                (ssoConfigurationChange)="save($event)"
                [apps]="apps"
                [groups]="groups"
                [inventoryRoles]="inventoryRoles"
              ></c8y-aad-template>
            }
            @if (ssoConfiguration.template === templateType.KEYCLOAK) {
              <c8y-key-cloak-template
                [ssoConfiguration]="ssoConfiguration"
                [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
                (ssoConfigurationChange)="save($event)"
                [apps]="apps"
                [groups]="groups"
                [inventoryRoles]="inventoryRoles"
              ></c8y-key-cloak-template>
            }
          </div>
        }
      </div>
      <div class="card-footer separator">
        <button
          class="btn btn-primary"
          title="{{ 'Save' | translate }}"
          type="submit"
          (click)="saveSubject.next()"
          [disabled]="!ssoConfigurationForm.form.valid || ssoConfigurationForm.form.pristine"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>