<template>
    <div class="image-comparison-container">
      <!-- "Vorher"-Bild liegt unten -->
      <img class="before-image" :src="beforeImage" alt="Vorher-Bild">
  
      <!-- "Nachher"-Bild oben, wird durch die Breite beschnitten -->
      <div class="after-image-container" :style="{ width: sliderValue + '%' }">
        <img class="after-image" :src="afterImage" alt="Nachher-Bild">
      </div>
  
      <!-- Der Slider -->
      <input type="range" min="0" max="100" v-model="sliderValue" class="slider">
  
      <!-- Die vertikale Trennlinie -->
      <div class="slider-line" :style="{ left: sliderValue + '%' }"></div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const props = defineProps({
    beforeImage: String,
    afterImage: String
  })
  
  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>
  