<template>
  <ul class="nav row">
    <li class="nav-item d-flex align-content-end flex-wrap col-sm-6 col-md-4 order-sm-1 order-md-0 justify-content-start">
      <a
          style="font-size:1.2rem;"
          title="Zobraziť predchádzajúcu sekciu"
          class="btn btn-link btn-lg d-flex align-content-around flex-wrap"
          :href="navigacia.predchadzajuca.link"
      >
        <span
            class="icon-chevron-left mr-1 fa-2x"
            v-show="!!navigacia.predchadzajuca.link"
        ></span>
        <span class="align-self-center text-truncate" style="max-width:130px;">
          {{ navigacia.predchadzajuca.nazov }}
        </span>
      </a>
    </li>
    <li class="align-content-start nav-item d-flex col-sm-12 col-md-4 order-sm-0 order-md-1 justify-content-center">
      <a
          style="font-size:1.2rem;"
          title="Zobraziť nadradenú sekciu"
          class="btn btn-link btn-lg align-items-center"
          :href="navigacia.rodic.link"
      >
        <span
            class="icon-chevron-up d-block fa-2x"
            v-show="!!navigacia.rodic.link"
        ></span>
        <span class="d-flex flex-wrap">
          <span class="text-truncate" style="max-width:150px;">
            {{ navigacia.rodic.nazov }}
          </span>
        </span>
      </a>
    </li>
    <li class="nav-item d-flex align-content-end flex-wrap col-sm-6 col-md-4 order-sm-2 order-md-2 justify-content-end">
      <a
          style="font-size:1.2rem;"
          title="Zobraziť nasledujúcu sekciu"
          class="btn btn-link btn-lg d-flex align-content-around flex-wrap"
          :href="navigacia.nasledujuca.link"
      >
        <span class="align-self-center text-truncate" style="max-width:130px;">
          {{ navigacia.nasledujuca.nazov }}
        </span>
        <span
            class="icon-chevron-right ml-1 fa-2x"
            v-show="!!navigacia.nasledujuca.link"
        ></span>
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'NavigaciaComponent',
  props: {
    sekcia: {
      required: true,
      type: Object,
      default: function () {
        return {
          nazov: null,
        }
      },
    },
    navigacia: {
      type: Object,
      default: function () {
        return {
          predchadzajuca: {
            nazov: null,
            link: null,
          },
          rodic: {
            nazov: null,
            link: null,
          },
          nasledujuca: {
            nazov: null,
            link: null,
          },
        }
      },
    },
  },
  methods: {
    isRoot() {
      return this.sekcia.parent_id === null
    },
    isLeaf() {
      return this.sekcia._lft + 1 === this.sekcia._rgt
    },
  },
}
</script>

<style scoped>

</style>