{% 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 is-animated -move -move-top animate-children -fade">
          {% for member in teammembers %}
            <li class="swiper-slide">
              <div class="content">
                {% 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>
              </div>
            </li>
          {% endfor %}
        </ul>
        <div class="nav-holder">
          <div class="content-wrapper">
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  <script>
    var swiperEl = document.getElementById('swiper-{{ id }}');
    new Swiper(swiperEl, {
      "loop": false,
      "speed": 1000,
      "slidesPerColumn": 2,
      "slidesPerColumnFill": 'row',
      "slidesPerView": 6,
      "slidesPerGroup": 6,
      "spaceBetween": 5,
      "effect": "slide",
      "navigation": {
        "nextEl": swiperEl.querySelectorAll('.swiper-button-next')[0],
        "prevEl": swiperEl.querySelectorAll('.swiper-button-prev')[0]
      },
      "breakpoints": {
        1980: {
          "slidesPerView": 6,
          "slidesPerGroup": 6,
          "slidesPerColumn": 2,
        },
        1650: {
          "slidesPerView": 5,
          "slidesPerGroup": 5,
          "slidesPerColumn": 2,
        },
        1320: {
          "slidesPerView": 4,
          "slidesPerGroup": 4,
          "slidesPerColumn": 2,
        },
        990: {
          "slidesPerView": 3,
          "slidesPerGroup": 3,
          "slidesPerColumn": 2,
        },
        660: {
          "slidesPerView": 2,
          "slidesPerGroup": 2,
          "slidesPerColumn": 1,
        },
        0: {
          "slidesPerView": 1,
          "slidesPerGroup": 1,
          "slidesPerColumn": 1,
        }
      },
      "on": {
        "slideChangeTransitionEnd": function (swiper) {
          window.dispatchEvent(new Event('scroll'));
        },
        "slideChangeTransitionStart": function (swiper) {
          setTimeout(function() {
            window.dispatchEvent(new Event('scroll'));
          },
          250);
          setTimeout(function() {
            window.dispatchEvent(new Event('scroll'));
          },
          500);
          setTimeout(function() {
            window.dispatchEvent(new Event('scroll'));
          },
          750);
        }
      }
    })</script>
{% endblock %}