<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 text-truncate"
                :href="navigacia.predchadzajuca.url"
            >
                <span class="icon-chevron-left mr-1 fa-2x"></span>
                <span class="align-self-center">
                    {{ navigacia.predchadzajuca.nazov }}
                </span>
            </a>
        </li>
        <li class="nav-item d-flex align-content-start flex-wrap 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 text-truncate"
                :href="navigacia.rodic.url"
            >
                <span class="icon-chevron-up d-block fa-2x"></span>
                <span class="align-self-center">
                    {{ navigacia.rodic.nazov }}
                </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 text-truncate"
                :href="navigacia.nasledujuca.url"
            >
                <span class="align-self-center">
                  {{ navigacia.nasledujuca.nazov }}
                </span>
                <span class="icon-chevron-right ml-1 fa-2x"></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,
              url: null,
            },
            rodic: {
              nazov: null,
              url: null,
            },
            nasledujuca: {
              nazov: null,
              url: null,
            },
          }
        },
      },
    },
    methods: {
      isRoot () {
        return this.sekcia.parent_id === null
      },
      isLeaf () {
        return this.sekcia._lft + 1 === this.sekcia._rgt
      },
    },
  }
</script>

<style scoped>

</style>