<script setup lang="ts">
useSeoLinking()
const { l } = useContentInjected()

useSeoMeta({
  title: () => l.value.meta.title,
  description: () => l.value.meta.description,
})

useHead({
  script: [
    {
      src: 'https://mainframe.capcorn.net/ressourcen/newUI/js/jquery.js',
      defer: true,
    },
    {
      src: 'https://mainframe.capcorn.net/ressourcen/newUI/js/capcorn.js',
      defer: true,
    },
  ],
  link: [
    {
      rel: 'stylesheet',
      href: 'https://mainframe.capcorn.net/ressourcen/newUI/css/capcorn.css',
    },
  ],
})

const route = useRoute()

const src = computed(() => {
  const lg = route.params.locale === 'de' ? 0 : 1
  return `https://www.capcorn.net/Query?MB=1487&FL=17&LG=${lg}&maxZim=3&zimDe=Apartment&zimEn=Apartment&showVpf=0`
})

// LG=0 für deutsch, LG=1 für englisch
// MP = maximale personenzahl
// maxZim
</script>

<template>
  <XScaffoldGridPage>
    <AppSection mode="card">
      <ClientOnly>
        <iframe
          id="iframeCapCorn"
          :src="src"
          frameborder="0"
          width="100%"
          scrolling="auto"
          class="min-h-[30rem]"
        />
      </ClientOnly>
    </AppSection>
  </XScaffoldGridPage>
</template>
