<template>

  <nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-1" itemscope itemtype="https://schema.org/BreadcrumbList">
      <li
        v-for="(crumb, n) of items"
        class="breadcrumb-item"
        :key="n"
        :class="{'active': n === items.length - 1}"
        :aria-current="n === items.length - 1 ? 'page' : null"
        :itemprop="crumb.disabled ? undefined : 'itemListElement'"
        :itemscope="!crumb.disabled"
        :itemtype="crumb.disabled ? undefined : 'https://schema.org/ListItem'"
      >
        <span v-if="crumb.disabled || !crumb.to">
          <span class="d-none d-md-inline">{{crumb.text}}</span>
          <span class="d-md-none" aria-hidden="true">{{crumb.mobileText || crumb.text}}</span>
        </span>
        <nuxt-link itemprop="item" v-else :to="crumb.to" :exact="crumb.exact">
          <span class="d-none d-md-inline" itemprop="name">{{crumb.text}}</span>
          <span class="d-md-none" aria-hidden="true">{{crumb.mobileText || crumb.text}}</span>
        </nuxt-link>
        <meta v-if="!crumb.disabled" itemprop="position" :content="n + 1" />
      </li>
    </ol>
  </nav>

</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

export default @Component({
  name: 'itfBreadcrumb',
  components: {
  }
})
class itfBreadcrumb extends Vue {
  @Prop({ type: Array }) items;
}
</script>
