<script setup lang="ts">
import CompetenceDetail from "@/components/competences/CompetenceDetail.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useCompetenceStore } from "@/stores/competence";
import * as log from "loglevel";

log.debug("CompetencesMainView created");

const competenceStore = useCompetenceStore();
</script>

<template>
  <div class="container-large">
    <nav class="py-4 lg:pb-8">
      <router-link
        v-if="competenceStore.competenceProfilePage"
        class="btn-text inline-flex items-center pl-0"
        :to="competenceStore.competenceProfilePage?.frontend_url"
      >
        <it-icon-arrow-left />
        <span>{{ $t("general.back") }}</span>
      </router-link>
    </nav>
    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
      <h1>Kompetenzen</h1>
      <ItDropdownSelect
        v-model="competenceStore.selectedCircle"
        class="w-full lg:w-96 mt-4 lg:mt-0"
        :items="competenceStore.availableCircles"
      ></ItDropdownSelect>
    </div>
    <ul v-if="competenceStore.competenceProfilePage">
      <li
        v-for="competence in competenceStore.competences"
        :key="competence.id"
        class="bg-white p-8 mb-8"
      >
        <CompetenceDetail :competence="competence"></CompetenceDetail>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
