{% load assets %}
<div class="carrousel-content">
  <ul class="carrousel-list">
    {% for menuitem in menuitems %}
      <li class="carrousel-list-item">
        <input type="radio" name="carrousel-{{cell.id}}"
          class="carrousel-radio-{{forloop.counter}}"
          id="carrousel-{{cell.id}}-{{forloop.counter}}"
          {% if forloop.first %}checked{% endif %}>
        <div class="slide">
          {% block carrousel-item %}
            <div class="carrousel-item"
              style="background-image: url({% asset_url menuitem.page.picture size="1000" crop="center" %})">
              <div class="carrousel-item-content">
                {% block carrousel-item-content %}
                  <a href="{{menuitem.page.get_online_url}}">
                    <strong class="carrousel-item-title">{{ menuitem.page.title }}</strong>
                    {% if menuitem.page.description %}<p class="carrousel-item-description">{{ menuitem.page.description }}</p>{% endif %}
                  </a>
                {% endblock %}
              </div>
            </div>
          {% endblock %}
        </div>
      </li>
    {% endfor %}
  </ul>
  <button class="carrousel-previous" title="Précédent" aria-label="Précédent" type="button"></button>
  {% block carrousel-navigation %}
    <div class="carrousel-nav">
      {% for menuitem in menuitems %}
        <label class="{% if forloop.first %}carrousel-label--active{% endif %}" for="carrousel-{{cell.id}}-{{forloop.counter}}"></label>
      {% endfor %}
    </div>
  {% endblock %}
  <button class="carrousel-next" title="Suivant" aria-label="Suivant" type="button"></button>
</div>
<script defer>
  const carrouselEl = document.currentScript.closest('.cell').querySelector('.carrousel-content')
  const listEl = carrouselEl.querySelector('ul')

  const getCurrentLi = () => listEl.querySelector('input:checked').closest('li')

  const next = () => {
    const nextInput = getCurrentLi().nextElementSibling?.querySelector('input')
    if (nextInput) {
      nextInput.click()
    } else {
      listEl.querySelector('li:first-child input').click()
    }
  }
  const previous = () => {
    const previousInput = getCurrentLi().previousElementSibling?.querySelector('input')
    if (previousInput) {
      previousInput.click()
    } else {
      listEl.querySelector('li:last-child input').click()
    }
  }

  const timeout_id = setInterval(next, 5000)

  carrouselEl.querySelector('label').addEventListener('click', () => {
    clearInterval(timeout_id)
  })
  carrouselEl.querySelector('.carrousel-next').addEventListener('click', () => {
    clearInterval(timeout_id)
    next()
  })
  carrouselEl.querySelector('.carrousel-previous').addEventListener('click', () => {
    clearInterval(timeout_id)
    previous()
  })
  carrouselEl.querySelector('ul.carrousel-list').addEventListener('change', (e) => {
    carrouselEl.querySelector(`label.carrousel-label--active`)?.classList.remove('carrousel-label--active')
    carrouselEl.querySelector(`label[for="${e.srcElement.id}"]`)?.classList.add('carrousel-label--active')
  })

  let touch_start, touch_end
  carrouselEl.querySelectorAll('.carrousel-item').forEach(item => {
    item.addEventListener('touchstart', e => {
      touch_start = event.changedTouches[0].screenX
    })
    item.addEventListener('touchend', e => {
      clearInterval(timeout_id)
      touch_end = event.changedTouches[0].screenX
      const diff = touch_start - touch_end
      if (diff > 0) {
        next()
      } else if (diff < 0) {
        previous()
      }
    })
  })
</script>