<template>
    <div class="col" :style="{ display: menuObsahuJeSkryte ? 'block' : 'none' }">
        <div class="nahlad-ucebneho-textu">
            <div v-if="jeSekcia" class="sekcia-obsah m-0 p-0">
                <h2 class="pt-3">{{ sekcia.nazov }}</h2>
                <hr class="py-1">
                <div v-html="sekcia.obsah" class="obsah" :style="{ fontSize: velkostPisma + 'em', lineHeight: velkostPisma + 0.2 + 'em' }"></div>
            </div>
            <div v-else class="row">
                <div v-if="maObrazok" class="col-sm-12 col-md-4">
                    <img :src="ucebnyMaterial.obrazok" :alt="ucebnyMaterial.nazov" class="ucebny-material-obrazok">
                </div>
                <div class="col-sm-12" :class="{'col-md-8' : maObrazok}">
                    <div class="ucebny-material-popis" :style="{ fontSize: velkostPisma + 'em !important' }">{{ucebnyMaterial.popis}}</div>
                </div>
            </div>
        </div>
        <hr class="py-1">
        <navigacia-component
            :sekcia="sekcia"
            :navigacia="navigacia"
        ></navigacia-component>
    </div>
</template>

<script>
  import NavigaciaComponent from './Navigacia'

  export default {
    name: 'ObsahComponent',
    components: {
      NavigaciaComponent,
    },
    props: {
      sekcia: {
        type: Object,
        default: function () {
          return {}
        },
      },
      navigacia: {
        type: Object,
        default: function () {
          return {
            predchadzajucaUrl: null,
            rodicUrl: null,
            nasledujucaUrl: null,
          }
        },
      },
      ucebnyMaterial: {
        type: Object,
        default: function () {
          return {
            nazov: null,
          }
        },
      },
      menuObsahuJeSkryte: {
        required: true,
        type: Boolean,
        default: true,
      },
      velkostPisma: {
        required: true,
        type: Number,
        default: 1.2,
      },
    },
    computed: {
      jeSekcia () {
        return !!Object.values(this.sekcia).length
      },
      maObrazok () {
        return !!this.ucebnyMaterial.obrazok
      }
    }
  }
</script>

<style scoped type="text/css">
    .nahlad-ucebneho-textu {
        display: block;
    }

    .sekcia-obsah, .ucebny-material-popis {
        font-size: 1.2em;
        line-height: 1.5em !important;
        border: 0 !important;
        font-family: 'sans-serif' !important;
        vertical-align: baseline !important;
        list-style: circle !important;
    }

    .ucebny-material-obrazok {
        max-width: 100%;
    }
</style>