<cdk-virtual-scroll-viewport
  [itemSize]="RowHeight"
  bitScrollLayout
  class="tw-transition-[padding-bottom] tw-duration-300 tw-ease-in-out"
  [ngClass]="batchBarService?.barVisible() ? 'tw-pb-[7.5rem]' : 'tw-pb-8'"
>
  <bit-table [dataSource]="dataSource" layout="fixed">
    <ng-container header>
      <tr>
        <th bitCell class="tw-w-24 tw-whitespace-nowrap" colspan="2">
          <input
            type="checkbox"
            bitCheckbox
            [disabled]="disabled || isEmpty"
            (change)="$event ? toggleAll() : null"
            [checked]="selection.hasValue() && isAllSelected"
            [attr.aria-label]="'selectAll' | i18n"
          />
        </th>
        <!-- Organization vault -->
        @if (showAdminActions) {
          <th
            bitCell
            bitSortable="name"
            [fn]="sortByName"
            [class]="showExtraColumn ? 'tw-w-3/5' : 'tw-w-full'"
          >
            {{ "name" | i18n }}
          </th>
        }
        <!-- Individual vault -->
        @else {
          <th bitCell [class]="showExtraColumn ? 'tw-w-3/5' : 'tw-w-full'">
            {{ "name" | i18n }}
          </th>
        }
        @if (showOwner) {
          <th bitCell class="tw-hidden tw-w-2/5 lg:tw-table-cell">
            {{ "owner" | i18n }}
          </th>
        }
        @if (showCollections) {
          <th bitCell class="tw-w-2/5 tw-hidden xl:tw-table-cell">
            {{ "collections" | vfo1I18n: "sharedFolders" }}
          </th>
        }
        @if (showGroups) {
          <th
            bitCell
            bitSortable="groups"
            [fn]="sortByGroups"
            class="tw-hidden tw-w-2/5 tw-pr-7 xl:tw-table-cell"
          >
            {{ "groups" | i18n }}
          </th>
        }
        @if (showPermissionsColumn) {
          <th
            bitCell
            bitSortable="permissions"
            default="desc"
            [fn]="sortByPermissions"
            class="tw-hidden tw-w-2/5 tw-pr-7 lg:tw-table-cell"
          >
            {{ "permission" | i18n }}
          </th>
        }
        <th
          bitCell
          [ngClass]="
            ((showCopyAndLaunchActions$ | async)
              ? 'tw-w-28'
              : batchBarService?.enabled()
                ? 'tw-w-24'
                : 'tw-w-12') + ' tw-text-right'
          "
        >
          @if (!batchBarService?.enabled()) {
            @let menuDisabled = disableMenu$ | async;
            <button
              [disabled]="disabled || isEmpty || menuDisabled"
              [bitMenuTriggerFor]="headerMenu"
              [attr.title]="menuDisabled ? ('missingPermissions' | i18n) : ''"
              bitIconButton="bwi-ellipsis-v"
              size="small"
              type="button"
              label="{{ 'options' | i18n }}"
            ></button>
            <bit-menu #headerMenu>
              @if (bulkMoveAllowed) {
                <button type="button" bitMenuItem (click)="bulkMoveToFolder()">
                  <i class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
                  {{ "addToFolder" | vfo1I18n: "addToMyFolder" }}
                </button>
              }
              @if (showAdminActions && showBulkEditCollectionAccess) {
                <button type="button" bitMenuItem (click)="bulkEditCollectionAccess()">
                  <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
                  {{ "editAccess" | i18n }}
                </button>
              }
              @if (
                (showAdminActions || showAssignToCollections()) && bulkAssignToCollectionsAllowed
              ) {
                <button type="button" bitMenuItem (click)="assignToCollections()">
                  <bit-icon fixedWidth [name]="'bwi-collection-shared' | vfo1Icon" slot="start" />
                  {{ "assignToCollections" | vfo1I18n: "addToSharedFolder" }}
                </button>
              }

              @if (bulkArchiveAllowed) {
                <button type="button" bitMenuItem (click)="bulkArchive()">
                  <i class="bwi bwi-fw bwi-archive" aria-hidden="true"></i>
                  {{ "archiveVerb" | i18n }}
                </button>
              }

              @if (bulkUnarchiveAllowed) {
                <button type="button" bitMenuItem (click)="bulkUnarchive()">
                  <i class="bwi bwi-fw bwi-unarchive" aria-hidden="true"></i>
                  {{ "unArchive" | i18n }}
                </button>
              }

              @if (canRestoreSelected$ | async) {
                <button type="button" bitMenuItem (click)="bulkRestore()">
                  <i class="bwi bwi-fw bwi-undo" aria-hidden="true"></i>
                  {{ "restoreSelected" | i18n }}
                </button>
              }
              @if (canDeleteSelected$ | async) {
                <button type="button" variant="danger" bitMenuItem (click)="bulkDelete()">
                  <bit-icon fixedWidth name="bwi-trash" slot="start" />
                  {{ (showBulkTrashOptions ? "permanentlyDeleteSelected" : "delete") | i18n }}
                </button>
              }
            </bit-menu>
          } @else {
            {{ "options" | i18n }}
          }
        </th>
      </tr>
    </ng-container>
    <ng-template body let-rows$>
      <ng-container *cdkVirtualFor="let item of rows$; templateCacheSize: 0">
        @if (item.collection) {
          <tr
            bitRow
            appVaultCollectionRow
            alignContent="middle"
            [disabled]="disabled"
            [collection]="item.collection"
            [showOwner]="showOwner"
            [showCollections]="showCollections"
            [showGroups]="showGroups"
            [organizations]="allOrganizations"
            [showPermissionsColumn]="showPermissionsColumn"
            [groups]="allGroups"
            [canDeleteCollection]="canDeleteCollection(item.collection)"
            [canEditCollection]="canEditCollection(item.collection)"
            [canViewCollectionInfo]="canViewCollectionInfo(item.collection)"
            [checked]="selection.isSelected(item)"
            (checkedToggled)="selection.toggle(item)"
            (onEvent)="event($event)"
          ></tr>
        }
        <!--
          addAccessStatus check here so ciphers do not show if user
          has filtered for collections with addAccess
        -->
        @if (item.cipher && (!addAccessToggle || (addAccessToggle && addAccessStatus !== 1))) {
          <tr
            bitRow
            appVaultCipherRow
            alignContent="middle"
            [disabled]="disabled"
            [cipher]="item.cipher"
            [showOwner]="showOwner"
            [showCollections]="showCollections"
            [showGroups]="showGroups"
            [showPremiumFeatures]="showPremiumFeatures"
            [useEvents]="useEvents"
            [viewingOrgVault]="viewingOrgVault"
            [cloneable]="canClone$(item) | async"
            [organizations]="allOrganizations"
            [collections]="allCollections"
            [checked]="selection.isSelected(item)"
            [canEditCipher]="canEditCipher(item.cipher)"
            [canAssignCollections]="canAssignCollections(item.cipher)"
            [canManageCollection]="canManageCollection(item.cipher)"
            [canDeleteCipher]="
              cipherAuthorizationService.canDeleteCipher$(item.cipher, showAdminActions) | async
            "
            [canRestoreCipher]="
              cipherAuthorizationService.canRestoreCipher$(item.cipher, showAdminActions) | async
            "
            (checkedToggled)="selection.toggle(item)"
            (onEvent)="event($event)"
            [userCanArchive]="userCanArchive"
            [enforceOrgDataOwnershipPolicy]="enforceOrgDataOwnershipPolicy"
          ></tr>
        }
      </ng-container>
    </ng-template>
  </bit-table>
</cdk-virtual-scroll-viewport>
