@let organization = organization$ | async;
@let selectedCollection = selectedCollection$ | async;
@let filter = filter$ | async;
@let refreshing = isRefreshing$ | async;
@let loading = loading$ | async;

@if (organization) {
  @if (!refreshing) {
    <app-organization-free-trial-warning
      [organization]="organization"
      (clicked)="navigateToPaymentMethod()"
    >
    </app-organization-free-trial-warning>
    <app-organization-reseller-renewal-warning [organization]="organization">
    </app-organization-reseller-renewal-warning>
  }

  @if (filter) {
    <app-org-vault-header
      [filter]="filter"
      [loading]="refreshing"
      [organization]="organization"
      [collection]="selectedCollection"
      [searchText]="currentSearchText$ | async"
      (addCipher)="addCipher($event)"
      (addCollection)="addCollection()"
      (editCollection)="editCollection(selectedCollection?.node, $event.tab, $event.readonly)"
      (deleteCollection)="deleteCollection(selectedCollection?.node)"
      (searchTextChanged)="filterSearchText($event)"
      (openAddItemDialogEvent)="openAddItemDialog()"
    ></app-org-vault-header>
  }

  <div class="tw-flex tw-flex-row tw-flex-1 -tw-mx-2.5">
    @let hideVaultFilters = hideVaultFilter$ | async;
    @if (!hideVaultFilters) {
      <div class="tw-basis-1/4 tw-max-w-1/4 tw-px-2.5">
        <app-organization-vault-filter
          [organization]="organization"
          [activeFilter]="activeFilter()"
          [searchText]="currentSearchText$ | async"
          [ciphers$]="allCiphers$"
          (searchTextChange)="filterSearchText($event)"
        ></app-organization-vault-filter>
      </div>
    }

    <div
      [class]="
        (hideVaultFilters ? 'tw-w-full' : 'tw-w-3/4') + ' tw-flex tw-flex-col tw-min-h-0 tw-px-2.5'
      "
    >
      @if (showAddAccessToggle() && activeFilter().selectedCollectionNode) {
        <bit-toggle-group
          class="tw-self-start"
          [selected]="collectionService.addAccessStatus$ | async"
          (selectedChange)="addAccessToggle($event)"
          [label]="'addAccessFilter' | i18n"
        >
          <bit-toggle [value]="0">
            {{ "all" | i18n }}
          </bit-toggle>

          <bit-toggle [value]="1">
            {{ "addAccess" | i18n }}
          </bit-toggle>
        </bit-toggle-group>
      }

      @if (activeFilter().isDeleted) {
        <bit-callout type="warning">
          {{ trashCleanupWarning }}
        </bit-callout>
      }

      @if (filter) {
        <app-vault-items
          class="tw-flex-1 tw-min-h-0"
          #vaultItems
          [ciphers]="ciphers$ | async"
          [collections]="collections$ | async"
          [allCollections]="allCollections$ | async"
          [allOrganizations]="organization ? [organization] : []"
          [allGroups]="allGroups$ | async"
          [disabled]="loading"
          [showOwner]="false"
          [showPermissionsColumn]="true"
          [showCollections]="filter.type !== undefined"
          [showGroups]="
            organization?.useGroups &&
            ((filter.type === undefined && filter.collectionId === undefined) ||
              filter.collectionId !== undefined)
          "
          [showPremiumFeatures]="organization?.useTotp"
          [showBulkMove]="false"
          [showBulkTrashOptions]="filter.type === 'trash'"
          [useEvents]="organization?.canAccessEventLogs"
          [showAdminActions]="true"
          (onEvent)="onVaultItemsEvent($event)"
          [showBulkEditCollectionAccess]="true"
          [showBulkAddToCollections]="true"
          [viewingOrgVault]="true"
          [addAccessStatus]="collectionService.addAccessStatus$ | async"
          [addAccessToggle]="showAddAccessToggle()"
          [activeCollection]="selectedCollection?.node"
        >
        </app-vault-items>
      }

      @let showCollectionAccessRestricted = showCollectionAccessRestricted$ | async;
      @if (!refreshing && (isEmpty$ | async)) {
        @if (!showCollectionAccessRestricted) {
          <bit-no-items>
            <span slot="title" class="tw-mt-4 tw-block">{{ "noItemsInList" | i18n }}</span>

            @if (
              filter &&
              filter.type !== "trash" &&
              filter.collectionId !== Unassigned &&
              (!selectedCollection || selectedCollection.node?.canEditItems(organization))
            ) {
              <button
                slot="button"
                bitButton
                (click)="addCipher()"
                [buttonType]="btnTextAddCreateFeatureFlag() ? 'secondary' : 'primary'"
                type="button"
                [startIcon]="btnTextAddCreateFeatureFlag() ? null : 'bwi-plus'"
                [disabled]="organization && !organization.enabled"
                [bitTooltip]="
                  organization && !organization.enabled ? ('organizationIsSuspended' | i18n) : ''
                "
              >
                {{ (btnTextAddCreateFeatureFlag() ? "addItem" : "newItem") | i18n }}
              </button>
            }
          </bit-no-items>
        } @else {
          <collection-access-restricted
            [canEditCollection]="selectedCollection?.node?.canEdit(organization)"
            [canViewCollectionInfo]="selectedCollection?.node?.canViewCollectionInfo(organization)"
            (viewCollectionClicked)="
              editCollection(selectedCollection?.node, $event.tab, $event.readonly)
            "
          >
          </collection-access-restricted>
        }
      }
      @if (refreshing) {
        <div class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start">
          <i
            class="bwi bwi-spinner bwi-spin tw-text-muted"
            title="{{ 'loading' | i18n }}"
            aria-hidden="true"
          ></i>
          <span class="tw-sr-only">{{ "loading" | i18n }}</span>
        </div>
      }
    </div>
  </div>
}

@if (vaultBatchBarFeatureFlag()) {
  <bit-vault-batch-action />
}