<template>
  <big-carousel :images="slides"></big-carousel>
  <section class="social-section content">
    <h2>{{ $t('social.title') }}</h2>
    <p>{{ $t('social.paragraph1') }}</p>
    <p>{{ $t('social.paragraph2') }}</p>
    <p>{{ $t('social.paragraph3') }}<br><br>{{ $t('social.paragraph4') }}</p>
    <h2>{{ $t('social.title2') }}</h2>
    <p>{{ $t('social.paragraph5') }}</p>
    
    <Carousel :autoplay="5000" class="big-carousel" :items-to-show="2" :wrapAround="true" > 
      <Slide index="0">
        <img class="slider-image" :src="$helper.getImage('imag-4.jpg')" alt="slide 1"/>
      </Slide>
      <Slide index="1">
        <img class="slider-image" :src="$helper.getImage('imag-5.jpg')" alt="slide 2"/>
      </Slide>
      <Slide index="2">
        <img class="slider-image" :src="$helper.getImage('imag-6.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-7.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-8.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-9.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-10.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-11.jpg')" alt="slide 3"/>
      </Slide>
      <Slide index="3">
        <img class="slider-image" :src="$helper.getImage('imag-12.jpg')" alt="slide 3"/>
      </Slide>
      <template #addons>
        <Navigation />
        <Pagination />
      </template>
    </Carousel>   
  </section>
</template>

<script>
import BigCarousel from '../../components/BigCarousel.vue';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'
import { slides } from '../../data';

export default {
  data() {
    return {
      slides: slides.social,
    }
  },
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
    BigCarousel
  }
}
</script>

<style lang="scss" scoped>
  .social-bottom {
    padding: 0 72px 72px;
    background-position: top left;
    overflow: hidden;
   
    p {
      padding-top: 70px;
    }

    .slider-image {
      width: 300px;
    }
  }

  @media only screen and (max-width: 767px) {
    .social-bottom {
      padding: 16px;

      img {
        float: none;
        width: 100%;
        padding: 0;

        .slider-image {
          width: 300px;
          height: 300px;
        }
      }
    }
  }
</style>