@if (kb$ | async; as kb) {
  <h3>
    {{ kb.slug }}
  </h3>
  <form
    [formGroup]="kbForm"
    (ngSubmit)="save()">
    <div class="input-with-copy">
      <pa-input
        readonly
        [value]="kb.id">
        Id
      </pa-input>
      <div>
        <pa-button
          size="small"
          aspect="basic"
          [icon]="copied ? 'check' : 'copy'"
          [paPopup]="menu"></pa-button>
        <pa-dropdown #menu>
          <pa-option-header>Copy</pa-option-header>
          <pa-separator></pa-separator>
          <pa-option (selectOption)="copy(false)">KB Id</pa-option>
          <pa-option (selectOption)="copy(true)">Account + Zone + KB</pa-option>
        </pa-dropdown>
      </div>
    </div>
    <pa-input
      readonly
      [value]="kb.created">
      Created
    </pa-input>
    <pa-input
      formControlName="zone"
      readonly>
      Zone
    </pa-input>
    <pa-input
      formControlName="slug"
      [readonly]="!(canEdit | async)">
      Slug
    </pa-input>
    <pa-input
      formControlName="title"
      [readonly]="!(canEdit | async)">
      Title
    </pa-input>
    <pa-toggle
      formControlName="prewarm_enabled"
      [disabled]="!(canEdit | async)">
      Shards pre-warming
    </pa-toggle>
    <nma-form-footer
      [disabled]="kbForm.pristine || kbForm.invalid || isSaving"
      (cancel)="reset()"></nma-form-footer>
  </form>
  @if (canSeeUsers | async) {
    <div class="add-member">
      <pa-input
        icon="search"
        [paPopup]="potentialMembersList"
        sameWidth
        [readonly]="!(canEdit | async)"
        (valueChange)="searchMemberTerm$.next($event)">
        Search member to add
      </pa-input>
      <pa-dropdown #potentialMembersList>
        @for (member of potentialMembers$ | async; track member.id) {
          <pa-option
            icon="circle-plus"
            [description]="member.id"
            (selectOption)="addMember(member)">
            {{ member.name }} – {{ member.email }}
          </pa-option>
        }
      </pa-dropdown>
    </div>
    <div class="body-s"></div>
    <pa-table
      border
      columns="2fr repeat(3, 1fr) 96px">
      <pa-table-header>
        <pa-table-cell header>Id</pa-table-cell>
        <pa-table-cell header>Name</pa-table-cell>
        <pa-table-cell header>Email</pa-table-cell>
        <pa-table-cell header>Role</pa-table-cell>
        <pa-table-cell-menu header></pa-table-cell-menu>
      </pa-table-header>
      @for (owner of kb.owners; track owner.id) {
        <pa-table-row>
          <pa-table-cell>
            <small>{{ owner.id }}</small>
          </pa-table-cell>
          <pa-table-cell>{{ owner.name }}</pa-table-cell>
          <pa-table-cell>{{ owner.email }}</pa-table-cell>
          <pa-table-cell>Owner</pa-table-cell>
          <pa-table-cell-menu>
            @if (kb.owners.length > 1) {
              <pa-button
                icon="more-vertical"
                [disabled]="!(canEdit | async)"
                aspect="basic"
                [paPopup]="ownerMenu">
                Menu
              </pa-button>
              <pa-dropdown #ownerMenu>
                <pa-option (selectOption)="setAsContributor(owner)">Set as Contributor</pa-option>
                <pa-option (selectOption)="setAsMember(owner)">Set as Member</pa-option>
                <pa-separator></pa-separator>
                <pa-option
                  destructive
                  (selectOption)="removeUser(owner)">
                  Remove
                </pa-option>
              </pa-dropdown>
            }
          </pa-table-cell-menu>
        </pa-table-row>
      }
      @for (contributor of kb.contributors; track contributor.id) {
        <pa-table-row>
          <pa-table-cell>
            <small>{{ contributor.id }}</small>
          </pa-table-cell>
          <pa-table-cell>{{ contributor.name }}</pa-table-cell>
          <pa-table-cell>{{ contributor.email }}</pa-table-cell>
          <pa-table-cell>Contributor</pa-table-cell>
          <pa-table-cell-menu>
            <pa-button
              icon="more-vertical"
              aspect="basic"
              [disabled]="!(canEdit | async)"
              [paPopup]="contributorMenu">
              Menu
            </pa-button>
            <pa-dropdown #contributorMenu>
              <pa-option (selectOption)="setAsOwner(contributor)">Set as Owner</pa-option>
              <pa-option (selectOption)="setAsMember(contributor)">Set as Member</pa-option>
              <pa-separator></pa-separator>
              <pa-option
                destructive
                (selectOption)="removeUser(contributor)">
                Remove
              </pa-option>
            </pa-dropdown>
          </pa-table-cell-menu>
        </pa-table-row>
      }
      @for (member of kb.members; track member.id) {
        <pa-table-row>
          <pa-table-cell>
            <small>{{ member.id }}</small>
          </pa-table-cell>
          <pa-table-cell>{{ member.name }}</pa-table-cell>
          <pa-table-cell>{{ member.email }}</pa-table-cell>
          <pa-table-cell>Member</pa-table-cell>
          <pa-table-cell-menu>
            <pa-button
              icon="more-vertical"
              aspect="basic"
              [disabled]="!(canEdit | async)"
              [paPopup]="memberMenu">
              Menu
            </pa-button>
            <pa-dropdown #memberMenu>
              <pa-option (selectOption)="setAsOwner(member)">Set as Owner</pa-option>
              <pa-option (selectOption)="setAsContributor(member)">Set as Contributor</pa-option>
              <pa-separator></pa-separator>
              <pa-option
                destructive
                (selectOption)="removeUser(member)">
                Remove
              </pa-option>
            </pa-dropdown>
          </pa-table-cell-menu>
        </pa-table-row>
      }
    </pa-table>
  }
}