<vault-organization-user-notifications></vault-organization-user-notifications>
<app-vault-banners [organizations]="organizations$ | async"></app-vault-banners>

<app-vault-header
  [filter]="filter"
  [loading]="refreshing && !performingInitialLoad"
  [organizations]="allOrganizations"
  [canCreateCollections]="canCreateCollections"
  [collection]="selectedCollection"
  (onAddCipher)="addCipher($event)"
  (onAddCollection)="addCollection()"
  (onAddFolder)="addFolder()"
  (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
  (onDeleteCollection)="deleteCollection(selectedCollection.node)"
  (onOpenAddItemDialog)="openAddItemDialog()"
></app-vault-header>

<app-vault-onboarding [ciphers]="ciphers"></app-vault-onboarding>

<div class="tw-flex tw-flex-row -tw-mx-2.5">
  <div class="tw-basis-1/4 tw-max-w-1/4 tw-px-2.5">
    <app-vault-filter
      #vaultFilter
      [activeFilter]="activeFilter"
      [searchText]="currentSearchText$ | async"
      (searchTextChanged)="filterSearchText($event)"
      (onEditFolder)="editFolder($event)"
    ></app-vault-filter>
  </div>
  <div class="tw-basis-3/4 tw-max-w-3/4 tw-px-2.5">
    @if (activeFilter.isDeleted) {
      <bit-callout type="warning">
        {{ trashCleanupWarning }}
      </bit-callout>
    }

    @if (showSubscriptionEndedMessaging$ | async) {
      <bit-callout type="subtle" [title]="'premiumSubscriptionEnded' | i18n">
        <ng-container>
          <div>
            {{ "premiumSubscriptionEndedDesc" | i18n }}
          </div>
          <a bitLink href="#" appStopClick (click)="navigateToGetPremium()">
            {{ "restartPremium" | i18n }}
          </a>
        </ng-container>
      </bit-callout>
    }

    <app-vault-items
      #vaultItems
      [ciphers]="ciphers"
      [collections]="collections"
      [allCollections]="allCollections"
      [allOrganizations]="allOrganizations"
      [disabled]="refreshing"
      [showOwner]="true"
      [showCollections]="false"
      [showGroups]="false"
      [showPremiumFeatures]="canAccessPremium"
      [showBulkMove]="showBulkMove"
      [showBulkTrashOptions]="filter.type === 'trash'"
      [useEvents]="false"
      [showAdminActions]="false"
      [showBulkAddToCollections]="true"
      [userCanArchive]="userCanArchive$ | async"
      [enforceOrgDataOwnershipPolicy]="enforceOrgDataOwnershipPolicy$ | async"
      (onEvent)="onVaultItemsEvent($event)"
    >
    </app-vault-items>
    @if (performingInitialLoad) {
      <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>
    }
    @if (isEmpty && !performingInitialLoad) {
      <div class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start tw-flex-1">
        <bit-no-items [icon]="(emptyState$ | async)?.icon">
          <div slot="title">
            {{ (emptyState$ | async)?.title | i18n }}
          </div>
          <p slot="description" bitTypography="body2" class="tw-max-w-md tw-text-center">
            {{ (emptyState$ | async)?.description | i18n }}
          </p>
          @if (showAddCipherBtn) {
            <button
              type="button"
              [buttonType]="btnTextAddCreateFeatureFlag() ? 'secondary' : 'primary'"
              bitButton
              (click)="addCipher()"
              slot="button"
              [startIcon]="btnTextAddCreateFeatureFlag() ? null : 'bwi-plus'"
            >
              {{ (btnTextAddCreateFeatureFlag() ? "addItem" : "newItem") | i18n }}
            </button>
          }
        </bit-no-items>
      </div>
    }
  </div>
</div>

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