<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>