<app-header [title]="title()" [icon]="icon()">
  @if (showBreadcrumbs()) {
    <bit-breadcrumbs slot="breadcrumbs" showTrailingArrow>
      <bit-breadcrumb
        [route]="[]"
        [queryParams]="{ organizationId: organization().id, collectionId: null }"
        queryParamsHandling="merge"
      >
        {{ organization().name }}
        <span>
          {{ "collections" | vfo1I18n: "sharedFolders" | lowercase }}
        </span>
      </bit-breadcrumb>
      <ng-container>
        @for (collection of collections(); track collection) {
          <bit-breadcrumb
            [icon]="'bwi-collection-shared' | vfo1Icon"
            [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() || canViewCollectionInfo())
    ) {
      <ng-container>
        <button
          bitIconButton="bwi-angle-down"
          [bitMenuTriggerFor]="editCollectionMenu"
          size="small"
          type="button"
          [label]="'editCollection' | vfo1I18n: 'editSharedFolder'"
        ></button>
        <bit-menu #editCollectionMenu>
          @if (canEditCollection()) {
            <button
              type="button"
              bitMenuItem
              (click)="handleEditCollection(CollectionDialogTabType.Info, false)"
            >
              <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
              {{ "editInfo" | i18n }}
            </button>
            <button
              type="button"
              bitMenuItem
              (click)="handleEditCollection(CollectionDialogTabType.Access, false)"
            >
              <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
              {{ "access" | i18n }}
            </button>
          }
          @if (!canEditCollection() && canViewCollectionInfo()) {
            <button
              type="button"
              bitMenuItem
              (click)="handleEditCollection(CollectionDialogTabType.Info, true)"
            >
              <i class="bwi bwi-fw bwi-pencil-square" aria-hidden="true"></i>
              {{ "viewInfo" | i18n }}
            </button>
            <button
              type="button"
              bitMenuItem
              (click)="handleEditCollection(CollectionDialogTabType.Access, true)"
            >
              <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
              {{ "viewAccess" | i18n }}
            </button>
          }
          @if (canDeleteCollection()) {
            <button type="button" bitMenuItem (click)="handleDeleteCollection()">
              <span class="tw-text-danger">
                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
                {{ "delete" | i18n }}
              </span>
            </button>
          }
        </bit-menu>
      </ng-container>
    }
    @if (loading()) {
      <small>
        <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>

  @if (organization().isProviderUser && !organization().isMember) {
    <bit-search
      class="tw-grow"
      [ngModel]="searchText()"
      (ngModelChange)="onSearchTextChanged($event)"
      [placeholder]="'searchCollection' | vfo1I18n: 'searchSharedFolder'"
    ></bit-search>
  }

  @if (filter().type !== "trash" && filter().collectionId !== Unassigned) {
    <div class="tw-shrink-0">
      <vault-new-cipher-menu
        [canCreateCipher]="canCreateCipher()"
        [canCreateCollection]="canCreateCollection()"
        [disabled]="isOrganizationSuspended()"
        (cipherAdded)="handleAddCipher($event)"
        (collectionAdded)="handleAddCollection()"
        (onAddItemDialog)="openAddItemDialog()"
      />
    </div>
  }
</app-header>
