<div class="page-header">
  <h1>{{ "scim" | i18n }}</h1>
</div>

<p>{{ "scimDescription" | i18n }}</p>

<div *ngIf="loading">
  <i
    class="bwi bwi-spinner bwi-spin text-muted"
    title="{{ 'loading' | i18n }}"
    aria-hidden="true"
  ></i>
  <span class="sr-only">{{ "loading" | i18n }}</span>
</div>
<form
  #form
  (ngSubmit)="submit()"
  [appApiAction]="formPromise"
  [formGroup]="formData"
  *ngIf="!loading"
>
  <div class="form-group">
    <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        id="enabled"
        [formControl]="enabled"
        name="Enabled"
        aria-describedby="scimEnabledCheckboxDescHelpText"
      />
      <label class="form-check-label" for="enabled">{{ "scimEnabledCheckboxDesc" | i18n }}</label>
      <div id="scimEnabledCheckboxDescHelpText">
        <small class="form-text text-muted">{{ "scimEnabledCheckboxDescHelpText" | i18n }}</small>
      </div>
    </div>
  </div>

  <bit-form-field *ngIf="showScimSettings">
    <bit-label>{{ "scimUrl" | i18n }}</bit-label>
    <input bitInput type="text" formControlName="endpointUrl" />
    <button
      type="button"
      bitSuffix
      bitIconButton="bwi-clone"
      (click)="copyScimUrl()"
      [appA11yTitle]="'copyScimUrl' | i18n"
    ></button>
  </bit-form-field>

  <bit-form-field *ngIf="showScimSettings">
    <bit-label>{{ "scimApiKey" | i18n }}</bit-label>
    <input
      bitInput
      [type]="showScimKey ? 'text' : 'password'"
      formControlName="clientSecret"
      id="clientSecret"
    />
    <ng-container>
      <button
        type="button"
        bitSuffix
        [disabled]="$any(rotateButton).loading"
        [bitIconButton]="showScimKey ? 'bwi-eye-slash' : 'bwi-eye'"
        (click)="toggleScimKey()"
        [appA11yTitle]="'toggleVisibility' | i18n"
      ></button>
    </ng-container>
    <ng-container #rotateButton [appApiAction]="rotatePromise">
      <!-- TODO: Convert to async actions -->
      <button
        [loading]="$any(rotateButton).loading"
        type="button"
        bitSuffix
        bitIconButton="bwi-generate"
        (click)="rotateScimKey()"
        [appA11yTitle]="'rotateScimKey' | i18n"
      ></button>
    </ng-container>
    <button
      type="button"
      bitSuffix
      bitIconButton="bwi-clone"
      (click)="copyScimKey()"
      [appA11yTitle]="'copyScimKey' | i18n"
    ></button>
    <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
  </bit-form-field>

  <button
    type="submit"
    buttonType="primary"
    bitButton
    [loading]="form.loading"
    [disabled]="form.loading"
  >
    {{ "save" | i18n }}
  </button>
</form>
