<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.url">
                {{sekcia.nazov}}
                <sekcia-component :sekcie="sekcia.children"></sekcia-component>
             </a>
             <a v-else :href="sekcia.url">
                {{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.url === 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>