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

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

    <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) {
      @if (knowledgeBoxes.length > 0 && maxKnowledgeBoxes !== -1) {
        <div class="account-kbs-counter">
          {{ 'account.kb.count' | translate: { count: knowledgeBoxes.length, max: maxKnowledgeBoxes } }}
        </div>
      }

      <pa-button
        kind="primary"
        aspect="solid"
        data-cy="add-kb"
        [disabled]="knowledgeBoxes.length >= maxKnowledgeBoxes && maxKnowledgeBoxes !== -1"
        [routerLink]="navigation.getKbCreationUrl(account.slug)"
        class="add-kb-button">
        {{ 'account.kb.create' | translate }}
      </pa-button>
    }
  </div>
}