<template>
    <nav class="row navbar navbar-expand-lg align-items-center">
        <div class="col-12 col-lg-auto order-lg-2 d-flex justify-content-between">
            <img :src="ucebnyMaterial.obrazok" alt="" class="avatar avatar-xs mx-1">
            <h2 class="header item" title="Názov učebného materiálu">{{ ucebnyMaterial.nazov }}</h2>
        </div>
        <div class="col-12 col-lg order-lg-1">
            <div class="collapse navbar-collapse navbar-toggle">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" @click="$emit('zobrazitObsah')" title="Obsah učebného materiálu">
                            <i class="icon-menu fa-2x" :class="{ 'text-blue' : !menuObsahuJeSkryte }"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-12 col-lg order-lg-3">
            <div class="collapse navbar-collapse navbar-toggle justify-content-end">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" @click="$emit('textZmensit')" title="Zmenšiť text">
                            <i class="icon-circle-with-minus fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" @click="$emit('textZvacsit')" title="Zväčšiť text">
                            <i class="icon-circle-with-plus fa-2x"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" @click="$emit('zmenitKontrast')" title="Kontrastný režim">
                            <i class="icon-adjust fa-2x" :class="{ 'text-blue' : kontrastJeAktivny }"></i>
                        </a>
                    </li>
                    <li class="nav-item" :class="{ 'text-hide' : zalozkaJeSkryta }">
                        <a class="nav-link" @click="$emit('zmenitZalozku')" title="Založiť záložku">
                            <i class="icon-bookmark fa-2x" :class="{ 'text-blue' : zalozkaJeAktivna }"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

<script>
  export default {
    name: 'HlavickaComponent',
    props: {
      ucebnyMaterial: {
        required: true,
        type: Object,
        default: function () {
          return {
            nazov: 'Nazov testovaci',
          }
        },
      },
      menuObsahuJeSkryte: {
        required: true,
        type: Boolean,
        default: false
      },
      kontrastJeAktivny: {
        required: true,
        type: Boolean,
        default: false
      },
      zalozkaJeSkryta: {
        type: Boolean,
        default: true
      },
      zalozkaJeAktivna: {
        required: true,
        type: Boolean,
        default: false
      },
    },
  }
</script>

<style scoped>

</style>