<template>
  <NuxtLayout name="mobile">
    <img v-hm="729" v-wm="393" src="~/assets/images/mobile/postfach/frame.png" />

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

    <button v-hm="111" v-wm="360" v-xm="17" v-ym="184" @click="popup_angebote = true">
      <Spot />
    </button>
    <PopupMobile v-model="popup_angebote">
      <div v-hm="746" v-wm="393" class="relative">
        <img src="~/assets/images/mobile/postfach/popups/angebote-frame.png" />
        <button v-h:746="48" v-w:393="48" v-x:393="341" v-y:746="8" @click="popup_angebote = false">
          <Spot />
        </button>
      </div>
    </PopupMobile>

    <button v-hm="111" v-wm="360" v-xm="17" v-ym="483" @click="popup_beitragsrechnung = true">
      <Spot />
    </button>
    <PopupMobile v-model="popup_beitragsrechnung">
      <div v-hm="746" v-wm="393" class="relative">
        <img src="~/assets/images/mobile/postfach/popups/beitragsrechnung-frame.png" />
        <button v-h:746="48" v-w:393="48" v-x:393="341" v-y:746="8" @click="popup_beitragsrechnung = false">
          <Spot />
        </button>
      </div>
    </PopupMobile>

    <button v-hm="56" v-wm="109" v-xm="268" v-ym="669" @click="popup_filter = true" class="shadow">
      <img src="~/assets/images/mobile/postfach/filter-button.png" />
      <Spot />
    </button>
    <PopupMobile v-model="popup_filter">
      <div v-hm="848" v-wm="393" class="relative">
        <img src="~/assets/images/mobile/postfach/popups/filters-frame.png" />
        <button v-h:848="48" v-w:393="48" v-x:393="341" v-y:848="8" @click="popup_filter = false">
          <Spot />
        </button>
      </div>
      <template #footer>
        <img src="~/assets/images/mobile/postfach/popups/filters-footer.png" />
      </template>
    </PopupMobile>
  </NuxtLayout>
</template>

<script lang="ts" setup>
const popup_angebote = ref(false)
const popup_beitragsrechnung = ref(false)
const popup_filter = ref(false)
</script>
