<template>
  <NuxtLayout>
    <img v-if="activeTab === 1" v-h="773" v-w="1210" src="~/assets/images/desktop/vertraege/frame-1.png" />
    <img v-else-if="activeTab === 2" v-h="1024" v-w="1210" src="~/assets/images/desktop/vertraege/frame-2.png" />

    <template #stickyHeader>
      <img v-h="64" v-w="1210" src="~/assets/images/desktop/vertraege/sticky-header.png" />
    </template>

    <button v-h="48" v-w="143" v-x="70.5" v-y="144" @click.stop="activeTab = 1">
      <img v-if="activeTab === 1" src="~/assets/images/desktop/vertraege/finanzen-tab-active.png" />
      <img v-else-if="activeTab === 2" src="~/assets/images/desktop/vertraege/finanzen-tab.png" />
      <Spot>
        <img v-if="activeTab === 1" src="~/assets/images/desktop/vertraege/finanzen-tab-active-hover.png" />
        <img v-else-if="activeTab === 2" src="~/assets/images/desktop/vertraege/finanzen-tab-hover.png" />
      </Spot>
    </button>

    <button v-h="48" v-w="143" v-x="212.5" v-y="144" @click.stop="activeTab = 2">
      <img v-if="activeTab === 2" src="~/assets/images/desktop/vertraege/versicherung-tab-active.png" />
      <img v-else-if="activeTab === 1" src="~/assets/images/desktop/vertraege/versicherung-tab.png" />
      <Spot>
        <img v-if="activeTab === 2" src="~/assets/images/desktop/vertraege/versicherung-tab-active-hover.png" />
        <img v-else-if="activeTab === 1" src="~/assets/images/desktop/vertraege/versicherung-tab-hover.png" />
      </Spot>
    </button>

    <template v-if="activeTab === 1">
      <ContractButtonBausparvertrag v-x="71" v-y="356" />
      <ContractButtonTopTagesgeld v-x="71" v-y="509" />
    </template>

    <template v-else-if="activeTab === 2">
      <ContractButtonHaftpflichtversicherung v-x="71" v-y="260.36" />
      <ContractButtonKfzVersicherung v-x="71" v-y="412.98" />
      <ContractButtonKrankenversicherung v-x="71" v-y="565.61" />
      <ContractButtonAuslandreiseKrankenversicherung v-x="71" v-y="658.38" />
    </template>
  </NuxtLayout>
</template>

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