<app-org-vault-header
  [filter]="filter"
  [loading]="refreshing"
  [organization]="organization"
  [collection]="selectedCollection"
  (onAddCipher)="addCipher()"
  (onAddCollection)="addCollection()"
  (onEditCollection)="editCollection(selectedCollection.node, $event.tab)"
  (onDeleteCollection)="deleteCollection(selectedCollection.node)"
></app-org-vault-header>

<div class="row">
  <div class="col-3">
    <div class="groupings">
      <div class="content">
        <div class="inner-content">
          <app-organization-vault-filter
            #vaultFilter
            [organization]="organization"
            [activeFilter]="activeFilter"
            [searchText]="currentSearchText$ | async"
            (searchTextChanged)="filterSearchText($event)"
          ></app-organization-vault-filter>
        </div>
      </div>
    </div>
  </div>
  <div class="col-9">
    <app-callout type="warning" *ngIf="activeFilter.isDeleted" icon="bwi bwi-exclamation-triangle">
      {{ trashCleanupWarning }}
    </app-callout>
    <app-vault-items
      [ciphers]="ciphers"
      [collections]="collections"
      [allCollections]="allCollections"
      [allOrganizations]="organization ? [organization] : []"
      [allGroups]="allGroups"
      [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?.useEvents"
      [cloneableOrganizationCiphers]="true"
      [showAdminActions]="true"
      (onEvent)="onVaultItemsEvent($event)"
      [showBulkEditCollectionAccess]="organization?.flexibleCollections"
      [showBulkAddToCollections]="organization?.flexibleCollections"
      [viewingOrgVault]="true"
      [flexibleCollectionsV1Enabled]="flexibleCollectionsV1Enabled"
    >
    </app-vault-items>
    <ng-container *ngIf="!flexibleCollectionsV1Enabled">
      <div
        class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
        *ngIf="showMissingCollectionPermissionMessage"
      >
        <bit-icon [icon]="noItemIcon" aria-hidden="true"></bit-icon>
        <p>{{ "noPermissionToViewAllCollectionItems" | i18n }}</p>
      </div>
      <div
        class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
        *ngIf="isEmpty && !showMissingCollectionPermissionMessage && !performingInitialLoad"
      >
        <bit-icon [icon]="noItemIcon" aria-hidden="true"></bit-icon>
        <p>{{ "noItemsInList" | i18n }}</p>
        <button
          type="button"
          buttonType="primary"
          bitButton
          (click)="addCipher()"
          *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned"
        >
          <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
          {{ "newItem" | i18n }}
        </button>
      </div></ng-container
    >
    <ng-container *ngIf="flexibleCollectionsV1Enabled && !performingInitialLoad && isEmpty">
      <bit-no-items *ngIf="!showCollectionAccessRestricted">
        <span slot="title" class="tw-mt-4 tw-block">{{ "noItemsInList" | i18n }}</span>
        <button
          slot="button"
          bitButton
          (click)="addCipher()"
          buttonType="primary"
          type="button"
          *ngIf="filter.type !== 'trash' && filter.collectionId !== Unassigned"
        >
          <i aria-hidden="true" class="bwi bwi-plus"></i> {{ "newItem" | i18n }}
        </button>
      </bit-no-items>
      <collection-access-restricted
        *ngIf="showCollectionAccessRestricted"
        (viewCollectionClicked)="
          editCollection(selectedCollection.node, CollectionDialogTabType.Info, true)
        "
      >
      </collection-access-restricted>
    </ng-container>
    <div
      class="tw-mt-6 tw-flex tw-h-full tw-flex-col tw-items-center tw-justify-start"
      *ngIf="performingInitialLoad"
    >
      <i
        class="bwi bwi-spinner bwi-spin text-muted"
        title="{{ 'loading' | i18n }}"
        aria-hidden="true"
      ></i>
      <span class="sr-only">{{ "loading" | i18n }}</span>
    </div>
  </div>
</div>
<ng-template #attachments></ng-template>
<ng-template #cipherAddEdit></ng-template>
<ng-template #collectionsModal></ng-template>
