<cds-breadcrumb no-trailing-slash>
  <cds-breadcrumb-item>
    <cds-breadcrumb-link href="{{ nav.homepage.url | url }}">Home</cds-breadcrumb-link>
  </cds-breadcrumb-item>

{%- if page %}
  {%- for doc in page.ancestors[::-1] %}
    {%- if doc.url %}
      <cds-breadcrumb-item>
        <cds-breadcrumb-link href="{{ doc.url | url }}">{{ doc.title }}</cds-breadcrumb-link>
      </cds-breadcrumb-item>
    {%- else %}
      <cds-breadcrumb-item>{{ doc.title }}</cds-breadcrumb-item>
    {%- endif %}
  {%- endfor %}

  {%- if page.meta and "extra_breadcrumb_title_1" in page.meta %}
  <cds-breadcrumb-item>
    {%- if "extra_breadcrumb_url_1" in page.meta %}
      <cds-breadcrumb-link href="{{ page.meta.extra_breadcrumb_url_1 }}">{{ page.meta.extra_breadcrumb_title_1 }}</cds-breadcrumb-link>
    {%- else %}
      {{ page.meta.extra_breadcrumb_title_1 }}
    {%- endif %}
  </cds-breadcrumb-item>
  {%- endif %}

  {%- if page.meta and "extra_breadcrumb_title_2" in page.meta %}
  <cds-breadcrumb-item>
    {%- if "extra_breadcrumb_url_2" in page.meta %}
      <cds-breadcrumb-link href="{{ page.meta.extra_breadcrumb_url_2 }}">{{ page.meta.extra_breadcrumb_title_2 }}</cds-breadcrumb-link>
    {%- else %}
      {{ page.meta.extra_breadcrumb_title_2 }}
    {%- endif %}
  </cds-breadcrumb-item>
  {%- endif %}

  <cds-breadcrumb-item aria-current="page">
    <cds-breadcrumb-link href="{{ page.toc | first | attr('url') }}">{{ page.toc | first | attr("title") }}</cds-breadcrumb-link>
  </cds-breadcrumb-item>

  <cds-breadcrumb-item>
    <cds-select id="breadcrumbs-toc" class="cds-theme-zone-g10" inline placeholder="..." oninput="changeAnchor(this.value)">
    {% set h1 = page.toc | first %}
    {% for toc_item in h1.children %}
      <cds-select-item value="{{ toc_item.url }}">{{ toc_item.title }}</cds-select-item>
    {% endfor %}
  </cds-select>
  </cds-breadcrumb-item>
{%- endif %}
</cds-breadcrumb>
