{% extends '@Contao/block_searchable' %}
{% import "@ContaoCore/Image/Studio/_macros.html.twig" as studio %}

{% block content %}
  {% if teammembers is not empty %}
    <div class="swiper-slider">
      <div id="swiper-{{ id }}"class="swiper-container">
        <ul class="swiper-wrapper">
          {% for member in teammembers %}
            <li class="swiper-slide">
              {% if member.imageFigure %}
                {{- studio.figure(member.imageFigure, { attr: { class: ('image_container ') }}) -}}
              {% endif %}
              <div class="name">{{ member.firstname }} {{ member.lastname }}</div>
              <div class="position">{{ member.position }}</div>
              <div class="comment">{{ member.comment }}</div>
            </li>
          {% endfor %}
        </ul>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  {% endif %}

  <script>
    var swiperEl = document.getElementById('swiper-{{ id }}');
    new Swiper(swiperEl, {
      "loop": true,
      "speed": 500,
      "slidesPerView": 5,
      "slidesPerGroup": 5,
      "spaceBetween": 5,
      "effect": "slide",
      "navigation": {
        "nextEl": swiperEl.querySelectorAll('.swiper-button-next')[0],
        "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
      },
      "breakpoints": {
        900: {
          "slidesPerView": 5,
          "slidesPerGroup": 5,
        },
        599: {
          "slidesPerView": 2,
          "slidesPerGroup": 2,
        },
        0: {
          "slidesPerView": 1,
          "slidesPerGroup": 1,
        }
      }
    })</script>
{% endblock %}