<script setup lang="ts">
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import * as log from "loglevel";
import { ref, watch } from "vue";

log.debug("HandlungsfelderOverview created");

const mediaStore = useMediaLibraryStore();
const dropdownSelected = ref(mediaStore.selectedLearningPath);

watch(dropdownSelected, (newValue) =>
  mediaStore.$patch({
    selectedLearningPath: newValue,
  })
);
</script>

<template>
  <div class="mx-auto max-w-5xl">
    <div class="flex flex-col lg:flex-row items-center justify-between mb-10">
      <h1>Handlungsfelder</h1>
      <!--      <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
    </div>
    <div v-if="mediaStore.mediaLibraryPage">
      <ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
        <li
          v-for="cat in mediaStore.mediaLibraryPage.children"
          :key="cat.id"
          class="bg-white p-4"
        >
          <router-link
            :to="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder/${cat.slug}`"
          >
            <img class="m-auto" :src="`/static/icons/demo/${cat.overview_icon}.svg`" />
            <h3 class="text-base text-center">{{ cat.title }}</h3>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.it-icon-hf > * {
  @apply m-auto;
}
</style>
