<c8y-title>{{ 'Single sign-on' | translate }}</c8y-title>

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

<c8y-action-bar-item>
  <li class="navbar-form hidden-xs" action-bar-position="left">
    <div title="{{ 'Template' | translate }}" class="form-group">
      <label for="template" class="control-label">
        {{ 'Template' | translate }}
      </label>
      <div class="c8y-select-wrapper">
        <select
          class="form-control"
          *ngIf="ssoConfiguration"
          name="template"
          id="template"
          [(ngModel)]="ssoConfiguration.template"
        >
          <option
            *ngFor="let templateType of templateTypeConfig | keyvalue"
            [ngValue]="templateType.key"
          >
            {{ templateType.value.label | translate }}
          </option>
        </select>
        <span></span>
      </div>
    </div>
  </li>
</c8y-action-bar-item>

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <form role="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">
        <div class="card-block p-0" *ngIf="ssoConfiguration">
          <c8y-custom-template
            *ngIf="ssoConfiguration.template === templateType.CUSTOM"
            [ssoConfiguration]="ssoConfiguration"
            [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
            (ssoConfigurationChange)="save($event)"
            [apps]="apps"
            [groups]="groups"
          >
          </c8y-custom-template>

          <c8y-aad-template
            *ngIf="ssoConfiguration.template === templateType.AZURE"
            [ssoConfiguration]="ssoConfiguration"
            [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
            (ssoConfigurationChange)="save($event)"
            [apps]="apps"
            [groups]="groups"
          >
          </c8y-aad-template>

          <c8y-key-cloak-template
            *ngIf="ssoConfiguration.template === templateType.KEYCLOAK"
            [ssoConfiguration]="ssoConfiguration"
            [ssoConfigurationChangeTrigger]="saveSubject.asObservable()"
            (ssoConfigurationChange)="save($event)"
            [apps]="apps"
            [groups]="groups"
          >
          </c8y-key-cloak-template>
        </div>
      </div>
      <div class="card-footer separator">
        <button
          title="{{ 'Save' | translate }}"
          class="btn btn-primary"
          (click)="saveSubject.next()"
          [disabled]="!ssoConfigurationForm.form.valid || ssoConfigurationForm.form.pristine"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </form>
  </div>
</div>