<template>
  <div class="bk-main-canvas relative">
    <ClientOnly>
      <div
        v-if="drupalUser.accessToolbar && !isEditing"
        class="hidden border-b border-b-gray-100 bg-white lg:block"
      >
        <VuepalAdminToolbar :key="language" />
        <div class="flex">
          <div class="mx-auto w-auto bg-white py-8 xl:min-w-[1174px]">
            <VuepalLocalTasks />
          </div>
        </div>
      </div>
    </ClientOnly>

    <div
      v-if="errorMessage"
      class="bg-error-500 text-white p-5 text-2xl font-bold text-center"
    >
      <DevOnly>
        <p>
          The current origin is not valid. Make sure the
          "vuepal.trustedOrigins.origins" setting is correct in nuxt.config.ts
        </p>
      </DevOnly>
      <p>{{ errorMessage }}</p>
    </div>
    <div v-else>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </div>
  </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,
)

// This will check the origin in the browser and return an error message if
// the origin is not trusted.
// const errorMessage = useTrustedOrigin()
const errorMessage = null

// At least one plural text is needed to ensure the correct types.
// Do not delete this line.
const { $textsPlural } = useEasyTexts()
$textsPlural(
  'plural.forced',
  1,
  '1 Resultat anzeigen',
  '@count Resultate anzeigen',
)

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