@if (isLoading) {
  <div class="loading-shade">
    <nsi-spinner></nsi-spinner>
  </div>
}

@if (account && knowledgeBoxes) {
  <div class="account-kbs page-spacing">
    <h1 class="page-title">{{ 'account.related_kbs' | translate }}</h1>

    <p class="page-description">{{ 'account.kb-description' | translate }}</p>

    <div class="account-kbs-list">
      @for (kb of knowledgeBoxes; track kb.id) {
        <div class="account-kb">
          <div
            [attr.data-cy]="kb.title + '-link'"
            [class.disabled]="!kb.role_on_kb"
            (click)="kb.role_on_kb ? goToKb(kb) : null"
            paEllipsisTooltip>
            <span class="kb-title">{{ kb.title }}</span>
            <small>({{ kb.slug }})</small>
          </div>
          <div class="actions">
            @if (account.can_manage_account) {
              <pa-button
                class="icon-button"
                icon="add-user"
                aspect="basic"
                paTooltip="account.kb.users"
                (click)="manageKbUsers(kb)">
                {{ 'account.kb.users' | translate }}
              </pa-button>

              @if (!!kb.role_on_kb && !(simpleMode | async)) {
                <pa-button
                  class="icon-button"
                  icon="edit"
                  aspect="basic"
                  paTooltip="account.kb.edit"
                  (click)="manageKb(kb)">
                  {{ 'account.kb.edit' | translate }}
                </pa-button>
              }
            }

            @if (kb.role_on_kb === 'SOWNER' || account.can_manage_account) {
              <pa-button
                size="small"
                icon="trash"
                kind="destructive"
                iconAndText
                [attr.data-cy]="kb.title + '-delete'"
                (click)="deleteKb(kb)">
                {{ 'generic.delete' | translate }}
              </pa-button>
            }
          </div>
        </div>
      }
    </div>

    @if (knowledgeBoxes.length === 0 && !(canAddKb | async)) {
      <div class="account-kbs-empty">
        {{ 'stash.contact_admin' | translate }}
      </div>
    }

    @if (canAddKb | async) {
      <nsi-sticky-footer>
        @if (knowledgeBoxes.length > 0 && maxKnowledgeBoxes !== -1) {
          <div
            footerNote
            class="account-kbs-counter">
            {{ 'account.kb.count' | translate: { count: knowledgeBoxes.length, max: maxKnowledgeBoxes } }}
          </div>
        }

        <pa-button
          aspect="basic"
          size="small"
          data-cy="add-kb"
          [disabled]="knowledgeBoxes.length >= maxKnowledgeBoxes && maxKnowledgeBoxes !== -1"
          routerLink="./create">
          {{ 'account.kb.create' | translate }}
        </pa-button>
      </nsi-sticky-footer>
    }
  </div>
}