@if ((kbs | async) !== null || (arags | async) !== null) {
  <div class="select-kb">
    <div class="select-kb-header">
      @if (!standalone) {
        @if (hasSeveralAccounts | async) {
          <nsi-back-button
            class="select-kb-back"
            link="/select">
            {{ 'generic.back' | translate }}
          </nsi-back-button>
        } @else {
          <nsi-button-mini
            class="select-kb-back"
            icon="chevron-left"
            (click)="logout()">
            {{ 'generic.logout' | translate }}
          </nsi-button-mini>
        }
      }

      <h2
        class="select-kb-title"
        paEllipsisTooltip>
        {{ (account | async)?.title }}
      </h2>

      @if (canManage | async) {
        <pa-button
          icon="gear"
          size="small"
          aspect="basic"
          class="manage-account-button"
          [paTooltip]="'generic.manage_account' | translate"
          (click)="goToAccountManage()">
          {{ 'generic.manage_account' | translate }}
        </pa-button>
      }
    </div>

    <div class="select-kb-body">
      @let isAragEnabled = isRetrievalAgentEnabled | async;
      @let kbList = kbs | async;
      @let kbCount = (kbList || []).length;
      @let aragList = arags | async;
      @let aragCount = (aragList || []).length;
      @let showList = isAragEnabled ? (kbCount > 0 || aragCount > 0) : kbCount > 0;

      @if (showList) {
        <div class="select-kb-list">
          @if (!standalone && isAragEnabled) {
            @for (arag of aragList; track arag.id) {
              @if (arag.id) {
                <a
                  class="kb"
                  data-cy="arag-list-item"
                  [class.disabled]="!arag.role_on_kb"
                  (click)="goToArag(arag)">
                  <pa-icon
                    size="small"
                    name="workflows"></pa-icon>

                  <span
                    class="kb-title"
                    [paTooltip]="'select.arag-tooltip' | translate: { arag: arag.title }">
                    {{ arag.title }}
                  </span>

                  <pa-icon
                    name="chevron-right"
                    size="small"></pa-icon>
                </a>
              }
            }
          }
          @if (!inRaoApp) {
            @for (kb of kbList; track kb.id) {
              @if (kb.id) {
                <a
                  class="kb"
                  data-cy="kb-list-item"
                  [class.disabled]="!kb.role_on_kb"
                  (click)="goToKb(kb)">
                  @if (standalone) {
                    <pa-button
                      class="delete-btn"
                      data-cy="delete-kb-button"
                      icon="trash"
                      aspect="basic"
                      kind="destructive"
                      size="small"
                      (click)="deleteKb($event, kb.id, kb.zone, kb.title)"></pa-button>
                  } @else {
                    <pa-icon
                      size="small"
                      name="knowledge-box"></pa-icon>
                  }

                  <span
                    class="kb-title"
                    [paTooltip]="'select.kb-tooltip' | translate: { kb: kb.title }">
                    {{ kb.title }}
                  </span>

                  <pa-icon
                    name="chevron-right"
                    size="small"></pa-icon>
                </a>
              }
            }
          }
        </div>
      } @else {
        <div
          class="select-kb-empty"
          data-cy="no-kb-message">
          <div class="select-kb-empty-message">{{ 'stash.no_knowledge_boxes' | translate }}</div>

          @if ((canAddKb | async) === false) {
            <div class="select-kb-empty-message">
              {{ 'stash.contact_admin' | translate }}
            </div>
          }
        </div>
      }
    </div>

    <div class="select-kb-footer">
      @if (!inRaoApp && (standalone || (canAddKb | async) === true)) {
        <pa-button
          data-cy="create-kb-button"
          aspect="basic"
          icon="knowledge-box"
          iconAndText
          (click)="createKb()">
          {{ 'kb.create.title' | translate }}
        </pa-button>
      }
      @if ((canAddArag | async) === true) {
        <pa-button
          data-cy="create-arag-button"
          aspect="basic"
          icon="workflows"
          iconAndText=""
          (click)="createArag()">
          {{ 'select.arag-create-button' | translate }}
        </pa-button>
      }
    </div>
  </div>
}