<script setup lang="ts">
import * as log from 'loglevel'
import OverviewCard from '@/components/mediaCenter/OverviewCard.vue'
import { ref, watch } from 'vue'
import { useMediaCenterStore } from '@/stores/mediaCenter'

log.debug('MediaMainView created')

const mediaStore = useMediaCenterStore()
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>Mediathek</h1>
      <!--      <ItDropdownSelect-->
      <!--        v-model="dropdownSelected"-->
      <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
    </div>
    <OverviewCard
      v-if="mediaStore.mediaCenterPage"
      title="Handlungsfelder"
      call2-action="Anschauen"
      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/handlungsfelder`"
      description="Finde alle Ressourcen der Handlungsfelder wie Lernmedien, Links und andere nützliche Informationen."
      icon="handlungsfelder-overview"
      class="mb-6"
    >
    </OverviewCard>
    <OverviewCard
      v-if="mediaStore.mediaCenterPage"
      title="Lernmedien"
      call2-action="Anschauen"
      :link="`/mediacenter/${mediaStore.mediaCenterPage.slug}/lernmedien`"
      description="Finde eine vollständige Liste der Bücher und anderen Medien, auf die im Kurs verwiesen wird."
      icon="lernmedien-overview"
      class="mb-6"
    >
    </OverviewCard>
  </div>
</template>

<style scoped></style>
