<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("CompetenceListPage created");

const props = defineProps<{
  courseSlug: string;
}>();

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 as string"
      >
        <it-icon-arrow-left />
        <span>{{ $t("general.back") }}</span>
      </router-link>
    </nav>
    <div class="mb-10 flex flex-col items-center justify-between lg:flex-row">
      <h1>Kompetenzen</h1>
      <ItDropdownSelect
        v-model="competenceStore.selectedCircle"
        class="mt-4 w-full lg:mt-0 lg:w-96"
        :items="competenceStore.availableCircles"
      ></ItDropdownSelect>
    </div>
    <ul v-if="competenceStore.competenceProfilePage()">
      <li
        v-for="competence in competenceStore.competences()"
        :key="competence.id"
        class="mb-8 bg-white p-8"
      >
        <CompetenceDetail
          :competence="competence"
          :course-slug="props.courseSlug"
        ></CompetenceDetail>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
