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

log.debug("MediaLibraryIndexPage created");
const mediaStore = useMediaLibraryStore();
</script>

<template>
  <div v-if="mediaStore.mediaLibraryPage" class="container-large">
    <div class="mb-12 mt-6 flex flex-col justify-between lg:flex-row">
      <h1>{{ mediaStore.mediaLibraryPage.title }}</h1>
    </div>
    <OverviewCard
      v-for="category in mediaStore.mediaLibraryPage.children"
      :key="category.id"
      :title="category.title"
      :call2-action="$t('general.show')"
      :link="
        category.content_type === 'media_library.MediaLibraryUrlPage'
          ? category.content_url
          : category.frontend_url
      "
      :description="category.description"
      :icon-url="category.icon_url"
      :external-link="category.content_type === 'media_library.MediaLibraryUrlPage'"
      class="mb-6"
    ></OverviewCard>
  </div>
</template>

<style scoped></style>
