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

log.debug("MediaLibraryView created");

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

const mediaLibraryStore = useMediaLibraryStore();

onMounted(async () => {
  log.debug("MediaLibraryView mounted", props.courseSlug);

  try {
    await mediaLibraryStore.loadMediaLibraryPage(`${props.courseSlug}-media`);
  } catch (error) {
    log.error(error);
  }
});
</script>

<template>
  <div class="bg-gray-200">
    <nav class="border-b bg-white px-6 py-4">
      <ul
        v-if="mediaLibraryStore.mediaLibraryPage"
        class="scrollbar overflow-auto whitespace-nowrap"
      >
        <li class="inline-block lg:ml-12">
          <router-link :to="mediaLibraryStore.mediaLibraryPage.frontend_url">
            Übersicht
          </router-link>
        </li>
        <li class="ml-6 inline-block lg:ml-12">
          <router-link
            :to="`${mediaLibraryStore.mediaLibraryPage.frontend_url}/category`"
          >
            Handlungsfelder
          </router-link>
        </li>
        <li class="ml-6 inline-block lg:ml-12">Allgemeines zu Versicherungen</li>
        <li class="ml-6 inline-block lg:ml-12">Lernmedien</li>
        <li class="ml-6 inline-block lg:ml-12">
          <a href="https://www.vbv.ch/de/der-vbv/lernen-lehren/lexikon">Lexikon</a>
        </li>
      </ul>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<style scoped>
.scrollbar::-webkit-scrollbar {
  display: none;
}
</style>
