<template>
  <div class="relative h-[calc(100vh-6rem)] max-h-[calc(100vh-6rem)] w-full overflow-hidden">
    <NuxtPicture
      preload
      loading="lazy"
      class="w-full h-full object-cover object-center"
      :src="baseUrl + backdrop.url"
      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
    />
    <img class="absolute h-40 w-fit bottom-10 left-5" :src="baseUrl + navbar.logo.url" />
  </div>
  <Header />
  <slot />
  <Footer />
</template>

<script setup lang="ts">
import type Global from "../types/single/global";
import type Homepage from "../types/single/homepage";

const {
  params: { slug: params },
} = useRoute();
const baseUrl = useStrapiUrl().replace("/api", "");
const { findOne } = useStrapi();

const { data: global } = await useAsyncData("global", () => findOne<Global>("global"));
const { navbar } = global.value?.data as unknown as Global;

const { data: homepage } = await useAsyncData("homepage", () => findOne<Homepage>("homepage"));
const { backdrop } = homepage.value?.data as unknown as Homepage;
</script>