<template>
  <div class="o-booking__meal-swiper-slides">
    <swiper
        :slides-per-view="1.3"
        :space-between="24"
        :slides-offset-after="offset"
        :slides-offset-before="offset"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
      <swiper-slide v-for="meal in meals">
        <div class="c-poster c-poster--addon c-poster--in-swiper">
          <div class="c-poster__image">
            <img class="u-clip-path" data-id="clip-path-image-2" :src="meal.overview_image" alt="">
          </div>
          <div class="c-poster__body--simple">
            <h3 class="c-poster__title">{{ meal.name }}</h3>
            <div class="c-poster__costs">
              <p class="c-poster__price">
                <span v-html="meal.price_label"></span><br>
                <template v-if="meal.minimum_amount_of_persons > 0">
                  Vanaf {{ meal.minimum_amount_of_persons }} personen
                </template>
              </p>
            </div>
            <div class="c-poster__book">
              <button class="c-icon-button c-poster__book-button" @click="$emit('modalButtonClicked', meal)">
                <i class="c-icon-button__icon"><svg width="32" height="32"><use href="/img/icon-cart.svg#cart"></use></svg></i>
              </button>
              <a class="c-text-button c-text-button--action c-poster__read-more" :href="`/activiteiten/${meal.slug}`">
                <span class="c-text-button__text">Lees meer</span>
                <i class="c-text-button__icon"><svg width="8" height="10"><use href="/img/icon-arrowRight.svg#arrowRight"></use></svg></i>
              </a>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
  components: {
    Swiper,
        SwiperSlide,
  },
  props: {
    meals: {
      default: []
    },
    modalProduct: {
      default: null
    }
  },
  computed: {
    offset() {
      return window.innerWidth / 14
    }
  },
  setup() {
    const onSwiper = () => {};
    const onSlideChange = () => {};
    return {
      onSwiper,
      onSlideChange,
    };
  },
};
</script>