<%
const breadcrumbs = opt.breadcrumbs && opt.breadcrumbs.length
  ? opt.breadcrumbs
  : _.breadcrumbs || (_.state.title && [{
    name: _.state.title,
    link: _.route.path
  }])

if (Array.isArray(breadcrumbs) && breadcrumbs.length) {
  %>
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb my-2 my-sm-3<%= breadcrumbs.length < 2 ? ' d-none d-md-flex' : '' %>">
        <li class="breadcrumb-item d-none d-md-block">
          <a href="/">
            <i class="i-home"></i>
          </a>
        </li>
        <% breadcrumbs.forEach(({ name, link }, index) => { %>
          <% if (index < breadcrumbs.length - 1) { %>
            <li
              <% if (index === breadcrumbs.length - 2) { %>
                class="breadcrumb-item"
              <% } else { %>
                class="breadcrumb-item d-none d-md-block"
              <% } %>
            >
              <a href="<%= link %>">
                <%= name %>
              </a>
            </li>
          <% } else { %>
            <li class="breadcrumb-item d-none d-md-block active" aria-current="page">
              <%= name %>
            </li>
          <% } %>
        <% }) %>
      </ol>
    </nav>
  </div>

  <script type="application/ld+json"><%-
    JSON.stringify({
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: [
        {
          '@type': 'ListItem',
          position: 1,
          item: {
            '@id': `https://${_.settings.domain}/`,
            name: 'Homepage'
          }
        }
      ].concat(breadcrumbs.map(({ name, link }, index) => {
        return {
          '@type': 'ListItem',
          position: index + 2,
          item: {
            '@id': `https://${_.settings.domain}${link}`,
            name
          }
        }
      }))
    })
  %></script>
<% } %>
