<template>
  <div class="image-comparison-container">
    <!-- „Vorher“-Bild liegt unten -->
    <NuxtImg
      class="before-image"
      provider="strapi"
      :src="beforeImage"
      alt="Vorher-Bild"
      format="webp"
      loading="lazy"
    />

    <!-- „Nachher“-Bild oben, Breite = Slider-Wert -->
    <div class="after-image-container" :style="{ width: sliderValue + '%' }">
      <NuxtImg
        class="after-image"
        provider="strapi"
        :src="afterImage"
        alt="Nachher-Bild"
        format="webp"
        loading="lazy"
      />
    </div>

    <!-- Slider -->
    <input v-model="sliderValue" type="range" min="0" max="100" class="slider" aria-label="Designvergleich zwischen Vorher und Nachher">

    <!-- Vertikale Trennlinie -->
    <div class="slider-line" :style="{ left: sliderValue + '%' }" />
  </div>
</template>
  
  <script setup>
  import { ref } from 'vue'
  
  defineProps({
  beforeImage: { type: String, required: true },
  afterImage:  { type: String, required: true }
})
  
  const sliderValue = ref(60) // Startposition in der Mitte
  </script>
  
  <style lang="sass">
  .image-comparison-container
    position: relative
    width: 100%
    height: auto
    aspect-ratio: 12 / 9
    user-select: none
    overflow: hidden
  
  .after-image,
  .before-image
    width: auto
    height: 100%
    object-fit: cover
    display: block
  
  .after-image-container
    position: absolute
    top: 0
    left: 0
    height: 100%
    overflow: hidden
    pointer-events: none  
  
    img
      width: auto
      height: 100%
      object-fit: cover
  
  
  
  /* Slider */
  .slider
    position: absolute
    top: 50%
    left: 0
    width: 100%
    height: 8px  // Slider-Höhe anpassen
    transform: translateY(-50%)
    appearance: none
    background: transparent
    cursor: pointer
    z-index: 10
    -webkit-appearance: none
    -moz-appearance: none
  
    &::-webkit-slider-thumb
      appearance: none
      width: 20px  // Breite des Schiebereglers
      height: 20px  // Höhe des Schiebereglers
      border-radius: 50%
      background: $pink
      border: 1px solid #fff
      cursor: pointer
      z-index: 15
  
    &::-moz-range-thumb
      width: 20px
      height: 20px
      border-radius: 50%
      background: $pink
      border: 1px solid #fff
      cursor: pointer
  
    &::-ms-thumb
      width: 20px
      height: 20px
      border-radius: 50%
      background: $pink
      border: 1px solid #fff
      cursor: pointer
  
  /* Vertikale Trennlinie */
  .slider-line
    position: absolute
    top: 0
    width: 4px
    height: 100%
    background: white
    border-radius: 2px
    z-index: 5
  </style>
  