@if (cipherGroups().length > 0 || description()) {
  <bit-section [disableMargin]="disableSectionMargin()">
    @if (collapsibleKey()) {
      <button
        class="tw-group/vault-section-header hover:tw-bg-primary-100 tw-rounded-md tw-pl-1 tw-mb-0.5 tw-w-full tw-border-x-0 tw-border-t-0 tw-border-b tw-border-solid focus-visible:tw-outline-none focus-visible:tw-ring-inset focus-visible:tw-ring-2 focus-visible:tw-ring-primary-600"
        [ngClass]="{
          'tw-border-b-secondary-300 tw-rounded-b-none [&:is(:hover,:focus-visible)]:tw-border-b-transparent [&:is(:hover,:focus-visible)]:tw-rounded-b-md':
            !sectionOpenState(),
          'tw-border-b-transparent': sectionOpenState(),
        }"
        type="button"
        [bitDisclosureTriggerFor]="disclosureRef"
        (click)="toggleSectionOpen()"
      >
        <ng-container *ngTemplateOutlet="sectionHeader"></ng-container>
      </button>
      <ng-container *ngTemplateOutlet="descriptionText"></ng-container>
      <bit-disclosure #disclosureRef [open]="sectionOpenState()" (openChange)="rerenderViewport()">
        <ng-container *ngTemplateOutlet="itemGroup"></ng-container>
      </bit-disclosure>
    } @else {
      <div class="tw-pl-1 tw-mb-0.5">
        <ng-container *ngTemplateOutlet="sectionHeader"></ng-container>
      </div>
      <ng-container *ngTemplateOutlet="descriptionText"></ng-container>
      <ng-container *ngTemplateOutlet="itemGroup"></ng-container>
    }
  </bit-section>
}

<ng-template #sectionHeader>
  <bit-section-header class="tw-p-0.5 -tw-mx-0.5">
    <h2 bitTypography="h6">
      {{ title() }}
    </h2>
    @if (showRefresh()) {
      <button
        bitIconButton="bwi-refresh"
        type="button"
        size="small"
        (click)="onRefresh.emit()"
        [label]="'refresh' | i18n"
      ></button>
    }
    <ng-content select="[slot=title-end]"></ng-content>
    <span bitTypography="body2" slot="end">
      <span
        [ngClass]="{
          'group-hover/vault-section-header:tw-hidden group-focus-visible/vault-section-header:tw-hidden':
            collapsibleKey() && sectionOpenState(),
          'tw-hidden': collapsibleKey() && !sectionOpenState(),
        }"
      >
        {{ ciphers().length }}
      </span>
      @if (collapsibleKey()) {
        <span class="tw-pr-1">
          <bit-icon
            [name]="sectionOpenState() ? 'bwi-angle-up' : 'bwi-angle-down'"
            class="tw-text-main"
            [ngClass]="{
              'tw-inline-block': !sectionOpenState(),
              'tw-hidden group-hover/vault-section-header:tw-inline-block group-focus-visible/vault-section-header:tw-inline-block':
                sectionOpenState(),
            }"
            aria-hidden="true"
          >
          </bit-icon>
        </span>
      }
    </span>
  </bit-section-header>
</ng-template>

<ng-template #descriptionText>
  @if (description()) {
    <div
      class="tw-text-muted tw-px-1 tw-mb-2"
      [ngClass]="{ '!tw-mb-0': disableDescriptionMargin() }"
      bitTypography="body2"
    >
      {{ description() }}
    </div>
  }
</ng-template>

<ng-template #itemGroup>
  <bit-item-group>
    @for (group of cipherGroups(); track $index) {
      @if (group.subHeaderKey) {
        <h3 class="tw-text-muted tw-text-xs tw-font-medium tw-pl-1 tw-mb-1 bit-compact:tw-m-0">
          {{ group.subHeaderKey | i18n }}
        </h3>
      }

      <cdk-virtual-scroll-viewport [itemSize]="itemHeight$ | async" bitScrollLayout>
        <bit-item
          *cdkVirtualFor="let cipher of group.ciphers"
          class="tw-group/vault-item"
          [ngClass]="{
            'hover:tw-bg-hover-default hover:tw-cursor-pointer': showFillTextOnHover(),
          }"
        >
          <button
            bit-item-content
            type="button"
            (click)="onCipherSelect(cipher)"
            (dblclick)="launchCipher(cipher)"
            [appA11yTitle]="
              cipherItemTitleKey()(cipher)
                | i18n: cipher.name : CipherViewLikeUtils.getLogin(cipher)?.username
            "
            class="{{ itemHeightClass }}"
          >
            <div slot="start" class="tw-justify-start tw-w-7 tw-flex">
              <app-vault-icon [cipher]="cipher"></app-vault-icon>
            </div>
            <span data-testid="item-name">{{ cipher.name }}</span>
            <div slot="default-trailing" class="tw-flex tw-gap-1.5">
              @if (cipher.organizationId) {
                <i
                  slot="default-trailing"
                  appOrgIcon
                  [tierType]="cipher.organization!.productTierType"
                  [size]="'small'"
                  [appA11yTitle]="orgIconTooltip(cipher)"
                ></i>
              }
              @if (CipherViewLikeUtils.hasAttachments(cipher)) {
                <bit-icon
                  name="bwi-paperclip"
                  class="bwi-sm"
                  [appA11yTitle]="'attachments' | i18n"
                ></bit-icon>
              }
            </div>
            <span slot="secondary">{{ CipherViewLikeUtils.subtitle(cipher, i18nService) }}</span>
          </button>

          <ng-container slot="end">
            @if (showFillTextOnHover()) {
              <bit-item-action>
                <button
                  type="button"
                  (click)="doAutofill(cipher)"
                  class="tw-opacity-0 tw-text-primary-600 tw-font-semibold tw-px-2 tw-bg-transparent tw-border-0 group-hover/vault-item:tw-opacity-100 group-focus-within/vault-item:tw-opacity-100"
                  bitTypography="body2"
                >
                  {{ "fill" | i18n }}
                </button>
              </bit-item-action>
            }
            @if (showAutofillBadge()) {
              <bit-item-action>
                <button
                  type="button"
                  bit-chip-action
                  variant="primary"
                  (click)="doAutofill(cipher)"
                  [title]="autofillShortcutTooltip() ?? ('autofillTitle' | i18n: cipher.name)"
                  [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
                  [label]="'fill' | i18n"
                ></button>
              </bit-item-action>
            }
            @if (showLaunchButton() && CipherViewLikeUtils.canLaunch(cipher)) {
              <bit-item-action>
                <button
                  type="button"
                  bitIconButton="bwi-external-link"
                  size="small"
                  (click)="launchCipher(cipher)"
                  [label]="'launchWebsiteForName' | i18n: cipher.name"
                ></button>
              </bit-item-action>
            }
            <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
            <app-item-more-options
              [cipher]="cipher"
              [showAutofill]="showAutofillInMenu()"
              [showViewOption]="showViewInMenu()"
            ></app-item-more-options>
          </ng-container>
        </bit-item>
      </cdk-virtual-scroll-viewport>
    }
  </bit-item-group>
</ng-template>