<template>
    <nav class="row navbar navbar-expand-lg justify-content-between align-items-center">
        <div class="col-6 col-lg order-lg-1">
              <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 class="col-6 col-lg order-lg-3">
              <ul class="navbar-nav float-right">
                  <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 class="col-12 col-lg-auto order-lg-2 d-flex">
            <h2 class="font-weight-bolder text-truncate" title="Názov učebného materiálu">{{ ucebnyMaterial.nazov }}</h2>
        </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>