{% load i18n %}
{% load media %}
{% comment %}Slider strony głównej. Wszystkie ustawienia (wysokość, promień,
   czas slajdu, strzałki, kropki) przychodzą z panelu (Treść > Strona główna),
   więc szablon maluje tylko napisy: kreska w kolorze wiodącym, licznik
   slajdów, duży nagłówek i przycisk.{% endcomment %}
<section class="{{ banner.slider_visibility_class }} {% if banner.slider_full_width %}pt-8{% else %}wrap pt-8{% endif %}">
  <div class="js-slider relative overflow-hidden bg-slate-900"
       style="min-height: {{ banner.slider_height_px }}px; border-radius: {{ banner.slider_radius }}px;"
       data-interval="{{ banner.slider_interval }}"
       data-autoplay="{{ banner.slider_autoplay|yesno:"1,0" }}"
       data-loop="{{ banner.slider_loop|yesno:"1,0" }}"
       data-pause="{{ banner.slider_pause_on_hover|yesno:"1,0" }}">

    {% comment %}Slajdy leżą jeden na drugim w tej samej komórce siatki -
       widać zawsze dokładnie jeden, a zmiana jest natychmiastowa, bez
       przejścia. Ukryty slajd znika razem ze swoja treścią (`hidden`), więc
       nie da się kliknąć odnośnika ze slajdu, którego nie widać.{% endcomment %}
    <div class="js-slider-track grid">
      {% for slide in slides %}
        <div class="js-slide relative col-start-1 row-start-1"{% if not forloop.first %} hidden{% endif %}>
          {% if slide.url %}<a href="{{ slide.url }}" class="group block h-full">{% endif %}
            {% picture slide.image alt=slide css=banner.slider_image_class sizes="100vw" %}
            {% if slide.title or slide.text or slide.button_label %}
              {% comment %}Gradient od dołu trzyma napis czytelny na każdym
                 zdjęciu; "przycmij tło" z panelu dokłada do tego ciemna
                 płaszczyznę pod samym tekstem.{% endcomment %}
              <div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/20 to-transparent"></div>
              <div class="absolute inset-0 flex flex-col justify-center gap-3 p-8 sm:p-14 {{ slide.align_class }}">
                <div class="max-w-2xl text-white {% if slide.dim_background %}bg-slate-900/70 p-8{% endif %}">
                  <span class="rule-alt" aria-hidden="true"></span>
                  <p class="eyebrow-alt">{{ forloop.counter|stringformat:"02d" }} / {{ slides|length|stringformat:"02d" }}</p>
                  {% if slide.title %}
                    <h2 class="title-hero mt-4">{{ slide.title }}</h2>
                  {% endif %}
                  {% if slide.text %}
                    <p class="lead-alt mt-6">{{ slide.text }}</p>
                  {% endif %}
                  {% if slide.button_label and slide.url %}
                    <span class="btn-primary btn-lg mt-8">
                      {{ slide.button_label }}
                      <span aria-hidden="true">&rarr;</span>
                    </span>
                  {% endif %}
                </div>
              </div>
            {% endif %}
          {% if slide.url %}</a>{% endif %}
        </div>
      {% endfor %}
    </div>

    {% if banner.slider_show_arrows and slides|length > 1 %}
      <button type="button" aria-label="{% trans "Poprzedni slajd" %}"
              class="js-slider-prev absolute left-0 top-1/2 -translate-y-1/2 bg-slate-900/60 px-5 py-4 text-lg text-white hover:bg-brand-600">
        <span aria-hidden="true">&#8249;</span>
      </button>
      <button type="button" aria-label="{% trans "Następny slajd" %}"
              class="js-slider-next absolute right-0 top-1/2 -translate-y-1/2 bg-slate-900/60 px-5 py-4 text-lg text-white hover:bg-brand-600">
        <span aria-hidden="true">&#8250;</span>
      </button>
    {% endif %}

    {% if banner.slider_show_dots and slides|length > 1 %}
      <div class="js-slider-dots absolute bottom-0 right-0 flex gap-px">
        {% for slide in slides %}
          <button type="button" aria-label="{% blocktrans with numer=forloop.counter %}Slajd {{ numer }}{% endblocktrans %}"
                  class="js-slider-dot h-2.5 w-12 bg-white/40 hover:bg-white"></button>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</section>

<script nonce="{{ csp_nonce }}">
// Przewijanie slidera. Wszystkie ustawienia (czas slajdu, zapetlenie,
// zatrzymywanie po najechaniu) przychodzą z panelu w atrybutach data-*.
// Slajd zmienia się natychmiast - w serwisie nie ma animacji.
(function () {
  function init(root) {
    var slides = Array.prototype.slice.call(root.querySelectorAll('.js-slide'));
    if (slides.length < 2) { return; }

    var dots = Array.prototype.slice.call(root.querySelectorAll('.js-slider-dot'));
    var loop = root.dataset.loop === '1';
    var index = 0;
    var timer = null;

    function show(next) {
      if (loop) {
        index = (next + slides.length) % slides.length;
      } else {
        index = Math.min(Math.max(next, 0), slides.length - 1);
      }
      slides.forEach(function (slide, n) { slide.hidden = n !== index; });
      dots.forEach(function (dot, n) {
        dot.classList.toggle('bg-white', n === index);
        dot.classList.toggle('bg-white/40', n !== index);
      });
    }

    function stop() { if (timer) { clearInterval(timer); timer = null; } }

    function start() {
      if (root.dataset.autoplay !== '1') { return; }
      stop();
      timer = setInterval(function () { show(index + 1); }, Number(root.dataset.interval) * 1000);
    }

    function go(next) { show(next); start(); }

    var prev = root.querySelector('.js-slider-prev');
    var nextButton = root.querySelector('.js-slider-next');
    if (prev) { prev.addEventListener('click', function () { go(index - 1); }); }
    if (nextButton) { nextButton.addEventListener('click', function () { go(index + 1); }); }
    dots.forEach(function (dot, n) { dot.addEventListener('click', function () { go(n); }); });

    if (root.dataset.pause === '1') {
      root.addEventListener('mouseenter', stop);
      root.addEventListener('mouseleave', start);
    }

    show(0);
    start();
  }

  document.querySelectorAll('.js-slider').forEach(init);
})();
</script>