<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-page-content>
  <h2 class="page-heading">Breadcrumb</h2>
  <h3>TOC with deep-linking</h3>
  <p>To use the global breadcrumbs just use the <code>&lt;bci-app&gt;</code> component in
    <code>app.component.html</code> (default). Alternatively set the navigation items manually with <code>BreadcrumbsService.setNavigationItems(navItems:
      SidenavItem[])</code> or check the docs of the BreadcrumbsService for other methods.</p>
  <ng-template #toc let-items="items" let-baseUrl="baseUrl">
    <li *ngFor="let item of items">
      <a [routerLink]="baseUrl + '/' + item.url">{{item.title}}</a>
      <ol *ngIf="item.children">
        <ng-container *ngTemplateOutlet="toc; context: { items: item.children, baseUrl: baseUrl + '/' + item.url }">
        </ng-container>
      </ol>
    </li>
  </ng-template>
  <ol>
    <ng-container *ngTemplateOutlet="toc; context: { items: demoToc, baseUrl: '/navigation/breadcrumbs-demo' }">
    </ng-container>
  </ol>
  <router-outlet></router-outlet>

  <hr>
  <h3>Custom Breadcrumb Navigation</h3>
  <bci-breadcrumbs>
    <bci-breadcrumb *ngFor="let breadcrumb of customBreadcrumbs | async" [title]="breadcrumb" [url]="'.'"
      (click)="customBreadcrumbClicked(breadcrumb)"></bci-breadcrumb>
  </bci-breadcrumbs>
  <p>{{customBreadcrumbMessage}}</p>
</bci-page-content>
