<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<ion-breadcrumbs
  (ionCollapsedClick)="popover.present($event)"
  [maxItems]="maxItems"
  [itemsAfterCollapse]="itemsAfterCollapse"
  [itemsBeforeCollapse]="itemsBeforeCollapse"
>
  <ion-breadcrumb *ngFor="let item of items">
    <ion-label class="crumb-label" *ngIf="item" [routerLink]="['/data-detail', item.uid]"
      >{{ 'name' | thingTranslate : $any(item) }}</ion-label
    >
  </ion-breadcrumb>
</ion-breadcrumbs>
<ion-popover #popover>
  <ng-template>
    <ion-list lines="none">
      <ng-container *ngIf="moreAnchor === 'start' && more | async as more">
        <ng-container
          *ngFor="let item of more"
          [ngTemplateOutlet]="popoverItem"
          [ngTemplateOutletContext]="{item}"
        ></ng-container>
      </ng-container>
      <ng-container *ngIf="showSelfInPopover">
        <ng-container
          *ngFor="let item of items"
          [ngTemplateOutlet]="popoverItem"
          [ngTemplateOutletContext]="{item}"
        ></ng-container>
      </ng-container>
      <ng-container *ngIf="moreAnchor === 'end' && more | async as more">
        <ng-container
          *ngFor="let item of more"
          [ngTemplateOutlet]="popoverItem"
          [ngTemplateOutletContext]="{item}"
        ></ng-container>
      </ng-container>
    </ion-list>
  </ng-template>
</ion-popover>

<ng-template #popoverItem let-item="item">
  <ion-item *ngIf="item" [routerLink]="['/data-detail', item.uid]" (click)="popover.dismiss()">
    {{ 'name' | thingTranslate : $any(item) }}
  </ion-item>
</ng-template>
