<template>
  <NuxtLayout :stickyHeaderOffset="0" name="mobile">
    <img v-hm="1113" 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="338" @click="zusatzfahrerPopup = true">
      <Spot />
    </button>
    <ZusatzfahrerPopupMobile v-model="zusatzfahrerPopup" />

    <button v-hm="40" v-wm="313" v-xm="40" v-ym="394" @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:977="24" v-w:393="24" v-x:393="352" v-y:977="24" @click="allServicesSheet = false">
          <Spot />
        </button>
        <button
          v-h:977="84"
          v-w:393="361"
          v-x:393="16"
          v-y:977="335"
          @click="
            () => {
              allServicesSheet = false
              invoicePopup = true
            }
          "
        >
          <Spot />
        </button>
      </div>
    </Sheet>
    <InvoicePopupMobile v-model="invoicePopup" />
  </NuxtLayout>
</template>

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