<app-header [title]="title" [icon]="icon">
  <bit-breadcrumbs *ngIf="showBreadcrumbs" slot="breadcrumbs">
    <bit-breadcrumb
      *ngIf="activeOrganizationId"
      [route]="[]"
      [queryParams]="{ organizationId: activeOrganizationId, collectionId: All }"
      queryParamsHandling="merge"
    >
      {{ activeOrganizationId | orgNameFromId: organizations }} {{ "vault" | i18n | lowercase }}
    </bit-breadcrumb>
    <ng-container>
      <bit-breadcrumb
        *ngFor="let collection of collections"
        icon="bwi-collection-shared"
        [route]="[]"
        [queryParams]="{ collectionId: collection.id }"
        queryParamsHandling="merge"
      >
        {{ collection.name }}
      </bit-breadcrumb>
    </ng-container>
  </bit-breadcrumbs>

  <ng-container slot="title-suffix">
    @if (collection != null && (canEditCollection || canDeleteCollection)) {
      <ng-container>
        <button
          bitIconButton="bwi-angle-down"
          [bitMenuTriggerFor]="editCollectionMenu"
          size="small"
          type="button"
          [label]="'editCollection' | i18n"
        ></button>
        <bit-menu #editCollectionMenu>
          <button
            type="button"
            *ngIf="canEditCollection"
            bitMenuItem
            (click)="editCollection(CollectionDialogTabType.Info)"
          >
            <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
            {{ "editInfo" | i18n }}
          </button>
          <button
            type="button"
            *ngIf="canEditCollection"
            bitMenuItem
            (click)="editCollection(CollectionDialogTabType.Access)"
          >
            <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
            {{ "access" | i18n }}
          </button>
          <button
            type="button"
            *ngIf="canDeleteCollection"
            bitMenuItem
            (click)="deleteCollection()"
          >
            <span class="tw-text-danger">
              <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
              {{ "delete" | i18n }}
            </span>
          </button>
        </bit-menu>
      </ng-container>
    }
    <small *ngIf="loading">
      <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>
    </small>
  </ng-container>

  <div *ngIf="filter.type !== 'trash'" class="tw-shrink-0">
    <vault-new-cipher-menu
      [canCreateCipher]="canCreateCipher"
      [canCreateFolder]="true"
      [canCreateSshKey]="true"
      [canCreateCollection]="canCreateCollections"
      (cipherAdded)="addCipher($event)"
      (folderAdded)="addFolder()"
      (collectionAdded)="addCollection()"
    />
  </div>
</app-header>
