<bit-section *ngIf="ciphers?.length > 0 || description" [disableMargin]="disableSectionMargin">
  <div class="tw-ml-1">
    <bit-section-header>
      <h2 bitTypography="h6">
        {{ title }}
      </h2>
      <button
        *ngIf="showRefresh"
        bitIconButton="bwi-refresh"
        type="button"
        size="small"
        (click)="onRefresh.emit()"
        [appA11yTitle]="'refresh' | i18n"
      ></button>
      <span bitTypography="body2" slot="end">{{ ciphers.length }}</span>
    </bit-section-header>
  </div>
  <div *ngIf="description" class="tw-text-muted tw-px-1 tw-mb-2" bitTypography="body2">
    {{ description }}
  </div>
  <bit-item-group>
    <cdk-virtual-scroll-viewport
      [itemSize]="itemHeight$ | async"
      class="tw-overflow-visible [&>.cdk-virtual-scroll-content-wrapper]:[contain:layout_style]"
    >
      <bit-item *cdkVirtualFor="let cipher of ciphers">
        <button
          bit-item-content
          type="button"
          (click)="onViewCipher(cipher)"
          (dblclick)="launchCipher(cipher)"
          [appA11yTitle]="'viewItemTitle' | i18n: cipher.name"
          class="{{ itemHeightClass }}"
        >
          <app-vault-icon slot="start" [cipher]="cipher"></app-vault-icon>
          <span data-testid="item-name">{{ cipher.name }}</span>
          <i
            *ngIf="cipher.organizationId"
            appOrgIcon
            [tierType]="cipher.organization.productTierType"
            [size]="'small'"
            [appA11yTitle]="orgIconTooltip(cipher)"
          ></i>
          <i
            *ngIf="cipher.hasAttachments"
            class="bwi bwi-paperclip bwi-sm"
            [appA11yTitle]="'attachments' | i18n"
          ></i>
          <span slot="secondary">{{ cipher.subTitle }}</span>
        </button>
        <ng-container slot="end">
          <bit-item-action *ngIf="showAutofillButton">
            <button
              type="button"
              bitBadge
              variant="primary"
              (click)="doAutofill(cipher)"
              [title]="'autofillTitle' | i18n: cipher.name"
              [attr.aria-label]="'autofillTitle' | i18n: cipher.name"
            >
              {{ "fill" | i18n }}
            </button>
          </bit-item-action>
          <bit-item-action *ngIf="!showAutofillButton && cipher.canLaunch">
            <button
              type="button"
              bitIconButton="bwi-external-link"
              size="small"
              (click)="launchCipher(cipher)"
              [attr.aria-label]="'launchWebsiteName' | i18n: cipher.name"
              [title]="'launchWebsiteName' | i18n: cipher.name"
            ></button>
          </bit-item-action>
          <app-item-copy-actions [cipher]="cipher"></app-item-copy-actions>
          <app-item-more-options
            [cipher]="cipher"
            [hideAutofillOptions]="showAutofillButton"
          ></app-item-more-options>
        </ng-container>
      </bit-item>
    </cdk-virtual-scroll-viewport>
  </bit-item-group>
</bit-section>
