browser/apps/web/src/app/vault/org-vault/vault.component.html

<ng-container *ngIf="freeTrial$ | async as freeTrial">
  <bit-banner
    id="free-trial-banner"
    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
    icon="bwi-billing"
    bannerType="premium"
    [showClose]="false"
    *ngIf="!refreshing && freeTrial.shownBanner"
  >
    {{ freeTrial.message }}
    <a
      bitLink
      linkType="secondary"
      (click)="navigateToPaymentMethod()"
      class="tw-cursor-pointer"
      rel="noreferrer noopener"
    >
      {{ "clickHereToAddPaymentMethod" | i18n }}
    </a>
  </bit-banner>
</ng-container>
<ng-container *ngIf="resellerWarning$ | async as resellerWarning">
  <bit-banner
    id="reseller-warning-banner"
    class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
    icon="bwi-billing"
    bannerType="info"
    [showClose]="false"
    *ngIf="!refreshing"
  >
    {{ resellerWarning?.message }}
  </bit-banner>
</ng-container>

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

<div class="row">
  <div class="col-3" *ngIf="!hideVaultFilters">
    <div class="groupings">
      <div class="content">
        <div class="inner-content">
          <app-organization-vault-filter
            [organization]="organization"
            [activeFilter]="activeFilter"
            [searchText]="currentSearchText$ | async"
            (searchTextChanged)="filterSearchText($event)"
          ></app-organization-vault-filter>
        </div>
      </div>
    </div>
  </div>
  <div [class]="hideVaultFilters ? 'col-12' : 'col-9'">
    <bit-toggle-group
      *ngIf="showAddAccessToggle && activeFilter.selectedCollectionNode"
      [selected]="addAccessStatus$ | async"
      (selectedChange)="addAccessToggle($event)"
      [attr.aria-label]="'addAccessFilter' | i18n"
    >
      <bit-toggle [value]="0">
        {{ "all" | i18n }}
      </bit-toggle>

      <bit-toggle [value]="1">
        {{ "addAccess" | i18n }}
      </bit-toggle>
    </bit-toggle-group>
    <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
      {{ trashCleanupWarning }}
    </bit-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?.canAccessEventLogs"
      [showAdminActions]="true"
      (onEvent)="onVaultItemsEvent($event)"
      [showBulkEditCollectionAccess]="true"
      [showBulkAddToCollections]="true"
      [viewingOrgVault]="true"
      [addAccessStatus]="addAccessStatus$ | async"
      [addAccessToggle]="showAddAccessToggle"
      [activeCollection]="selectedCollection?.node"
    >
    </app-vault-items>
    <ng-container *ngIf="!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 &&
            selectedCollection?.node?.canEditItems(organization)
          "
        >
          <i aria-hidden="true" class="bwi bwi-plus"></i> {{ "newItem" | i18n }}
        </button>
      </bit-no-items>
      <collection-access-restricted
        *ngIf="showCollectionAccessRestricted"
        [canEditCollection]="selectedCollection?.node?.canEdit(organization)"
        [canViewCollectionInfo]="selectedCollection?.node?.canViewCollectionInfo(organization)"
        (viewCollectionClicked)="
          editCollection(selectedCollection.node, $event.tab, $event.readonly)
        "
      >
      </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="tw-sr-only">{{ "loading" | i18n }}</span>
    </div>
  </div>
</div>
<ng-template #attachments></ng-template>
<ng-template #cipherAddEdit></ng-template>
<ng-template #collectionsModal></ng-template>