<template>
  <div>
    <NuxtPageDependency>
      <PageHeader />
    </NuxtPageDependency>

    <NuxtPageDependency v-if="showBreadcrumb">
      <VuepalBreadcrumb v-slot="{ links }">
        <Breadcrumb :links />
      </VuepalBreadcrumb>
    </NuxtPageDependency>

    <div>
      <ClientOnly>
        <DrupalMessages v-if="!isEditing" />
      </ClientOnly>

      <slot />
    </div>
    <PageFooter />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const drupalUser = useDrupalUser()
const language = useCurrentLanguage()

const isEditing = computed(
  () =>
    !!(route.query.blokkliEditing || route.query.blokkliPreview) &&
    drupalUser.value.accessToolbar,
)

const showBreadcrumb = computed(() => !route.meta.hideBreadcrumb)

useHead({
  htmlAttrs: {
    lang: language.value,
  },
})
</script>
