<template>
  <div class="col" :style="{ display: menuObsahuJeSkryte ? 'none' : 'block' }">
    <div class="menu-ucebneho-textu">
      <ul class="list" style="list-style: none;">
        <li>
          <a :href="ucebnyMaterial.url">Predslov</a>
        </li>
      </ul>
      <sekcia-component :sekcie="sekcie"></sekcia-component>
    </div>
  </div>
</template>

<script>
import SekciaComponent from './Sekcia'

export default {
  name: 'SekcieComponent',
  components: {
    SekciaComponent,
  },
  props: {
    ucebnyMaterial: {
      required: true,
      type: Object,
      default() {
        return {}
      },
    },
    sekcie: {
      required: true,
      type: Array,
      default: function () {
        return []
      },
    },
    menuObsahuJeSkryte: {
      required: true,
      type: Boolean,
      default: true,
    },
  },
}
</script>

<style scoped type="text/css">
.menu-ucebneho-textu {
  z-index: 10;
  font-family: 'sans-serif';
  font-size: 1.5em;
  line-height: 2em;
}

ol.ui.list li ol li:before {
  margin-left: -2em !important;
}

ol.ui.list li ol li ol li:before {
  margin-left: -2.7em !important;
}

ol.ui.list li ol li ol li ol li:before {
  margin-left: -3.4em !important;
}

ol.ui.list li ol li ol li ol li ol li:before {
  margin-left: -4.1em !important;
}

ol.ui.list li ol li ol li ol li ol li ol li:before {
  margin-left: -4.8em !important;
}
</style>