<template>
  <NuxtLayout :stickyHeaderOffset="0" name="mobile">
    <img v-hm="1149" v-wm="393" src="~/assets/images/mobile/vertraege/kfz-versicherung/frame.png" />

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

    <template #stickyHeaderActions>
      <HeaderBackButtonMobile />
    </template>

    <button v-hm="40" v-wm="313" v-xm="40" v-ym="370" @click="zusatzfahrerPopup = true">
      <Spot />
    </button>
    <ZusatzfahrerPopupMobile v-model="zusatzfahrerPopup" />

    <button v-hm="40" v-wm="313" v-xm="40" v-ym="426" @click="allServicesSheet = true">
      <Spot />
    </button>
    <Sheet v-model="allServicesSheet">
      <div class="relative">
        <img src="~/assets/images/mobile/vertraege/kfz-versicherung/all-services-sheet.png" />
        <button v-h:885="24" v-w:393="24" v-x:393="352" v-y:885="24" @click="allServicesSheet = false">
          <Spot />
        </button>
      </div>
    </Sheet>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const zusatzfahrerPopup = ref(false)
const allServicesSheet = ref(false)
</script>
