<template>
  <ol class="list">
    <li v-if="!!sekcie && !!sekcie.length" v-for="sekcia in sekcie" :class="{ active: zobrazenaSekcia(sekcia) }">
      <a v-if="jeRodic(sekcia)" :href="sekcia.link">
        {{ sekcia.nazov }}
        <sekcia-component :sekcie="sekcia.children"></sekcia-component>
      </a>
      <a v-else :href="sekcia.link">
        {{ sekcia.nazov }}
      </a>
    </li>
    <li v-else>Ešte neexistujú žiadne sekcie...</li>
  </ol>
</template>

<script>
export default {
  name: 'SekciaComponent',
  props: {
    sekcie: {
      required: true,
      type: Array,
      default: function () {
        return []
      },
    },
  },
  methods: {
    jeRodic(sekcia) {
      return sekcia.hasOwnProperty('children') && sekcia.children.length
    },
    zobrazenaSekcia(sekcia) {
      return sekcia.link === window.location.href
    },
  },
}
</script>

<style scoped type="text/css">
.menu-ucebneho-textu ol, .menu-ucebneho-textu li {
  margin: 0;
  list-style-type: decimal;
}

li.active > a {
  font-weight: bolder;
}

li.active > a > ol {
  font-weight: normal;
}
</style>