@if (kb; as kb) {
  <div class="knowledge-box-settings page-spacing">
    <div class="section">
      <h1>{{ 'stash.profile' | translate }}</h1>

      @if (kbForm) {
        <form
          class="fields-container"
          [formGroup]="kbForm"
          (ngSubmit)="saveKb()">
          <pa-input
            formControlName="uid"
            readonly>
            {{ 'generic.uid' | translate }}
          </pa-input>

          @if (zoneValue) {
            <pa-input
              formControlName="zone"
              readonly>
              {{ 'generic.processing-zone' | translate }}
            </pa-input>
          }
          <pa-input formControlName="slug">
            {{ 'generic.slug' | translate }}
          </pa-input>

          <pa-input
            formControlName="title"
            [errorMessages]="validationMessages['title']">
            {{ 'kb.form.name' | translate }}
          </pa-input>

          <pa-textarea
            formControlName="description"
            resizable
            [rows]="4">
            {{ 'generic.description' | translate }}
          </pa-textarea>

          <pa-toggle
            formControlName="hidden_resources_enabled"
            labelOnRight>
            {{ 'kb.form.hidden-resources' | translate }}
          </pa-toggle>

          @if (hiddenResourcesEnabled) {
            <pa-toggle
              formControlName="hidden_resources_hide_on_creation"
              labelOnRight>
              {{ 'kb.form.hide-new-resources' | translate }}
            </pa-toggle>
          }

          <pa-toggle
            formControlName="enforce_security"
            labelOnRight>
            {{ 'kb.form.enforce-security' | translate }}
          </pa-toggle>

          @if (!standalone) {
            <pa-textarea
              formControlName="allowed_origins"
              placeholder="https://your.domain"
              help="kb.form.allowed_origins.help"
              rows="3"
              resizable>
              {{ 'kb.form.allowed_origins.label' | translate }}
            </pa-textarea>
            <div class="allowed-ips">
              <pa-textarea
                formControlName="allowed_ip_addresses"
                [placeholder]="'kb.form.allowed-ips.placeholder' | translate: { ip: ipAddress | async }"
                help="kb.form.allowed-ips.help"
                rows="3"
                resizable>
                {{ 'kb.form.allowed-ips.label' | translate }}
              </pa-textarea>
              <div>
                <pa-icon
                  name="info"
                  [paPopover]="warning"></pa-icon>
                <pa-popover #warning>
                  {{ 'kb.form.allowed-ips.warning' | translate: { ip: ipAddress | async } }}
                </pa-popover>
              </div>
            </div>
          }

          @if (kb.state?.toLowerCase(); as state) {
            <div class="kb-status">
              <h3
                class="title-m"
                [innerHTML]="'kb.settings.status.label' | translate: { state: state }"></h3>

              <pa-button (click)="toggleKbState()">
                {{ (state === 'published' ? 'account.kb.retire' : 'account.kb.publish') | translate }}
              </pa-button>
            </div>
          }

          <footer>
            <pa-button
              type="submit"
              kind="primary"
              data-cy="save-kb-settings"
              [disabled]="kbForm.invalid || kbForm.pristine || saving">
              {{ 'generic.save' | translate }}
            </pa-button>
            <pa-button
              aspect="basic"
              [disabled]="kbForm.pristine"
              (click)="resetKbForm()">
              {{ 'generic.cancel' | translate }}
            </pa-button>
          </footer>
        </form>
      }
    </div>
  </div>
}