<template>
  <NuxtLayout name="mobile">
    <img v-if="activeTab === 1" v-hm="572" v-wm="393" src="~/assets/images/mobile/vertraege/frame-1.png" />
    <img v-else-if="activeTab === 2" v-hm="1215" v-wm="393" src="~/assets/images/mobile/vertraege/frame-2.png" />

    <template #stickyHeader>
      <img v-hm="64" v-wm="393" src="~/assets/images/mobile/vertraege/sticky-header.png" />
    </template>

    <button v-if="activeTab === 1" v-hm="48" v-wm="143" v-xm="196.5" v-ym="144" @click.stop="activeTab = 2">
      <Spot />
    </button>
    <button v-else-if="activeTab === 2" v-hm="48" v-wm="143" v-xm="54.5" v-ym="144" @click.stop="activeTab = 1">
      <Spot />
    </button>

    <template v-if="activeTab === 1">
      <ContractButtonBausparvertragMobile v-xm="16" v-ym="245" />
      <ContractButtonTopTagesgeldMobile v-xm="16" v-ym="435" />
    </template>

    <template v-else-if="activeTab === 2">
      <ContractButtonKfzVersicherungMobile v-xm="16" v-ym="425.38" />
    </template>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const activeTab = ref(1)
</script>
