<template>
  <header>
    <img alt="LCC logo" class="logo" src="../../../assets/logo.svg" width="75" height="75" />
    <nav>
      <ul>
        <li v-if="showCalculation"><navigation-element class="navigationbox" to="/calculations">My calculations</navigation-element></li>
        <li v-if="showReporting"><navigation-element class="navigationbox" to="/reports">Reporting</navigation-element></li>
        <li v-if="showConfiguration"><navigation-element class="navigationbox" to="/config">Configuration</navigation-element></li>
      </ul>
    </nav>
  </header>
</template>

<script>
import {PhCube, PhHeart, PhHorse} from "@phosphor-icons/vue";
import NavigationElement from "@/components/UI/NavigationElement.vue";
import Config from "@/pages/Config.vue";
import {useActiveUserStore} from "@/store/activeuser.js";
import {mapStores} from "pinia";

export default {
  name: "TheHeader",
  components: {Parameterization: Config, NavigationElement, PhCube, PhHeart, PhHorse},
  computed: {
    ...mapStores(useActiveUserStore),
    showCalculation() {
      return this.activeUserStore.allowCalculation;
    },
    showReporting() {
      return this.activeUserStore.allowReporting;
    },
    showConfiguration() {
      return this.activeUserStore.allowConfiguration;
    }
  },
  async created() {
    await this.activeUserStore.loadIfRequired();
  }
}
</script>

<style scoped>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3.6rem 0;
}

.logo {
  margin-bottom: 3rem;
}

ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 40px;
  margin: 0;
  padding: 0;
}

</style>