<app-header></app-header>

@if (showProvisioningBanner()) {
  <bit-callout type="info">
    {{ "scimProvisioningBannerInfo" | i18n }}
  </bit-callout>
}

<form [formGroup]="formData">
  <bit-card>
    <div [hidden]="!loading()">
      <bit-spinner />
      <span class="tw-sr-only">{{ "loading" | i18n }}</span>
    </div>
    <div [hidden]="loading()">
      <div class="tw-flex tw-items-start tw-justify-between tw-gap-6">
        <div>
          <h2 bitTypography="h2" class="tw-mb-3">{{ "scim" | i18n }}</h2>
          <p [id]="descriptionId" bitTypography="body1" class="tw-mb-0">
            {{ "scimDescriptionV2" | i18n }}
            <a
              bitLink
              target="_blank"
              endIcon="bwi-external-link"
              href="https://bitwarden.com/help/about-scim/"
            >
              {{ "scimLearnMore" | i18n }}
            </a>
          </p>
        </div>
        <label [for]="switchInputId">
          <span [id]="labelId" class="tw-sr-only">{{ "scim" | i18n }}</span>
          <bit-switch
            #enabledSwitch
            [id]="switchId"
            [formControl]="enabled"
            (change)="submit()"
            class="tw-shrink-0 tw-mt-1"
          >
          </bit-switch>
        </label>
      </div>

      <div class="tw-mt-6" [hidden]="!showScimSettings()">
        <bit-form-field>
          <bit-label>{{ "scimUrl" | i18n }}</bit-label>
          <input bitInput type="text" formControlName="endpointUrl" readonly />
          <button
            type="button"
            bitSuffix
            bitIconButton="bwi-clone"
            [bitAction]="copyScimUrl"
            [label]="'copyScimUrl' | i18n"
          ></button>
        </bit-form-field>
        <bit-form-field>
          <bit-label>{{ "scimApiKey" | i18n }}</bit-label>
          <input
            bitInput
            [type]="showScimKey() ? 'text' : 'password'"
            formControlName="clientSecret"
            id="clientSecret"
            readonly
          />
          <button
            type="button"
            bitSuffix
            [bitIconButton]="showScimKey() ? 'bwi-eye-slash' : 'bwi-eye'"
            [bitAction]="loadApiKey"
            [label]="'toggleVisibility' | i18n"
          ></button>
          <button
            type="button"
            bitSuffix
            bitIconButton="bwi-clone"
            [bitAction]="copyScimKey"
            [label]="'copyScimKey' | i18n"
          ></button>
          <button
            type="button"
            bitSuffix
            bitIconButton="bwi-generate"
            [bitAction]="rotateScimKey"
            [label]="'rotateScimKey' | i18n"
          ></button>
          <bit-hint>{{ "scimApiKeyHelperText" | i18n }}</bit-hint>
        </bit-form-field>
        @if (stagedStatusEnabled()) {
          <bit-form-control-card>
            <bit-switch
              [formControl]="inviteUsersAfterProvisioning"
              (change)="submit()"
            ></bit-switch>
            <bit-label>
              {{ "scimInviteUsersAfterProvisioning" | i18n }}
              <button
                type="button"
                bitLink
                startIcon="bwi-question-circle"
                [bitPopoverTriggerFor]="inviteUsersHelpPopover"
                position="below-center"
                appA11yTitle="{{ 'scimInviteUsersAfterProvisioningHelpTitle' | i18n }}"
              ></button>
              <bit-popover
                [title]="'scimInviteUsersAfterProvisioningHelpTitle' | i18n"
                #inviteUsersHelpPopover
              >
                {{ "scimInviteUsersAfterProvisioningHelpBody" | i18n }}
                <bit-popover-footer>
                  <a bitLink target="_blank" href="https://bitwarden.com/help/about-scim/">
                    {{ "learnMore" | i18n }}
                  </a>
                </bit-popover-footer>
              </bit-popover>
            </bit-label>
            <bit-hint>{{ "scimInviteUsersAfterProvisioningHint" | i18n }}</bit-hint>
          </bit-form-control-card>
        }
      </div>
    </div>
  </bit-card>
</form>
