{%- comment -%}
  Two images displayed side by side.

  Usage:
    {% include embed/image/side-by-side.html
       left='/assets/img/posts/2026/elementarz-kredka-3.png'
       right='/assets/img/posts/2026/elementarz-kredka-4.png' %}

  Optional params:
    gap='6px'             gap between the two images
    max_width='80%'       width of the pair relative to the content column
    mobile_max_width='..' width used on narrow screens (defaults to max_width)
    alt_left / alt_right   alt text for each image

    mobile_gallery=true   on narrow screens, show one image at a time as a
                          swipeable carousel with left/right arrows instead of
                          shrinking both to fit
    desktop_gallery=false  use that carousel on wide screens too (implies the
                          carousel is active at every width)

    loop=false             make the carousel wrap around endlessly. Default is
                          false: the left arrow is hidden on the first photo and
                          the right arrow is hidden on the last.

    counter=true          hide the "1/2" counter (shown by default)
    counter_position='bottom-right' where the counter sits (default bottom-right). MUST be
                          quoted (the value contains a hyphen). Options:
                          top-left, top-right, bottom-left, bottom-right show a
                          circular badge; top-center (or top) and bottom-center
                          (or bottom) show a centered pill.
                          e.g. counter_position='bottom-left'

    enable_zoom_arrows=true
                          disable prev/next arrows in the zoomed (lightbox) view.
                          Enabled by default: the two photos become one lightbox
                          gallery you can arrow through.
{%- endcomment -%}
{%- assign max_w = include.max_width | default: '80%' -%}
{%- assign mobile_w = include.mobile_max_width | default: max_w -%}
{%- assign gap = include.gap | default: '6px' -%}
{%- assign gallery = false -%}{%- if include.mobile_gallery or include.desktop_gallery -%}{%- assign gallery = true -%}{%- endif -%}
{%- assign is_loop = false -%}{%- if include.loop == true -%}{%- assign is_loop = true -%}{%- endif -%}
{%- assign zoom_arrows = true -%}{%- if include.enable_zoom_arrows == false -%}{%- assign zoom_arrows = false -%}{%- endif -%}
{%- if include.desktop_gallery -%}{%- assign gopen = '' -%}{%- assign gclose = '' -%}{%- else -%}{%- assign gopen = '@media all and (max-width: 849px) {' -%}{%- assign gclose = '}' -%}{%- endif -%}
<style>
.ss-wrap { position: relative; margin: 1rem auto; max-width: {{ max_w }}; }
.side-by-side { display: flex; gap: {{ gap }}; justify-content: center; }
.side-by-side .img-link { width: 50%; margin: 0; }
.side-by-side img { width: 100%; margin: 0; border: none; display: block; }
.ss-nav { display: none; }
.ss-clone { display: none; }
.ss-counter { display: none; }

@media all and (max-width: 849px) {
  .ss-wrap { max-width: {{ mobile_w }}; }
}

{{ gopen }}
  .ss-gallery .side-by-side {
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .ss-gallery .side-by-side::-webkit-scrollbar { display: none; }
  .ss-gallery .side-by-side .img-link {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
  }
  .ss-gallery .ss-clone { display: block; }
  .ss-gallery .ss-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
  }
  .ss-gallery .ss-prev { left: 0.4rem; }
  .ss-gallery .ss-next { right: 0.4rem; }

  .ss-gallery .ss-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
  }
  .ss-gallery .ss-pos-top-left,
  .ss-gallery .ss-pos-top-right,
  .ss-gallery .ss-pos-bottom-left,
  .ss-gallery .ss-pos-bottom-right {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
  }
  .ss-gallery .ss-pos-top,
  .ss-gallery .ss-pos-top-center,
  .ss-gallery .ss-pos-bottom,
  .ss-gallery .ss-pos-bottom-center {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
  }
  .ss-gallery .ss-pos-top-left { top: 1.1rem; left: 1.1rem; }
  .ss-gallery .ss-pos-top-right { top: 1.1rem; right: 1.1rem; }
  .ss-gallery .ss-pos-bottom-left { bottom: 1.1rem; left: 1.1rem; }
  .ss-gallery .ss-pos-bottom-right { bottom: 1.1rem; right: 1.1rem; }
  .ss-gallery .ss-pos-top,
  .ss-gallery .ss-pos-top-center { top: 1.1rem; left: 50%; transform: translateX(-50%); }
  .ss-gallery .ss-pos-bottom,
  .ss-gallery .ss-pos-bottom-center { bottom: 1.1rem; left: 50%; transform: translateX(-50%); }
{{ gclose }}
</style>

<div class="ss-wrap{% if gallery %} ss-gallery{% endif %}" data-loop="{{ is_loop }}"{% if zoom_arrows %} data-ss-zoom="1"{% endif %}>
  {% if gallery %}<button type="button" class="ss-nav ss-prev" aria-label="Poprzednie zdjęcie">&#8249;</button>{% endif %}
  <div class="side-by-side">
    <img src="{{ include.left | relative_url }}" alt="{{ include.alt_left }}">
    <img src="{{ include.right | relative_url }}" alt="{{ include.alt_right }}">
  </div>
  {% if gallery %}<button type="button" class="ss-nav ss-next" aria-label="Następne zdjęcie">&#8250;</button>{% endif %}
  {% if gallery and include.counter != false %}<span class="ss-counter ss-pos-{{ include.counter_position | default: 'bottom-right' }}" aria-hidden="true"></span>{% endif %}
</div>
{% if zoom_arrows %}
<script>
/* Runs at parse time, before Chirpy's deferred `.popup` init, so it can opt this
   pair out of the per-image lightbox — they get re-bound as one gallery below. */
(function () {
  var wrap = document.currentScript.previousElementSibling;
  if (!wrap) return;
  wrap.querySelectorAll('a.img-link').forEach(function (a) { a.classList.remove('popup'); });
})();
</script>
{% endif %}
{% if gallery or zoom_arrows %}
<script>
(function () {
  if (window.__ssInit) return;
  window.__ssInit = true;

  function setup(wrap) {
    var track = wrap.querySelector('.side-by-side');
    if (!track || track.dataset.ssReady) return;
    var loop = wrap.dataset.loop === 'true';
    var reals = Array.prototype.slice.call(track.children);
    var count = reals.length;
    if (count < 2) return;
    track.dataset.ssReady = '1';

    var prevBtn = wrap.querySelector('.ss-prev');
    var nextBtn = wrap.querySelector('.ss-next');
    var counterEl = wrap.querySelector('.ss-counter');

    // In loop mode, clone the end slides so the carousel can slide continuously
    // and then teleport (without animation) onto the matching real slide.
    var offset = 0;
    if (loop) {
      var head = reals[count - 1].cloneNode(true);
      var tail = reals[0].cloneNode(true);
      head.classList.add('ss-clone');
      tail.classList.add('ss-clone');
      head.setAttribute('aria-hidden', 'true');
      tail.setAttribute('aria-hidden', 'true');
      track.insertBefore(head, reals[0]);
      track.appendChild(tail);
      offset = 1;
    }

    var animating = false;
    var w = function () { return track.clientWidth; };
    var domIndex = function () { return Math.round(track.scrollLeft / w()); };
    var go = function (i, smooth) {
      track.scrollTo({ left: w() * i, behavior: smooth ? 'smooth' : 'auto' });
    };

    function update() {
      var real = ((domIndex() - offset) % count + count) % count;
      if (counterEl) counterEl.textContent = (real + 1) + '/' + count;
      if (!loop) {
        if (prevBtn) prevBtn.style.visibility = real <= 0 ? 'hidden' : '';
        if (nextBtn) nextBtn.style.visibility = real >= count - 1 ? 'hidden' : '';
      }
    }

    function step(dir) {
      if (animating) return;
      var target = domIndex() + dir;
      if (!loop && (target < offset || target > offset + count - 1)) return;
      animating = true;
      go(target, true);
      window.setTimeout(function () { animating = false; update(); }, 450);
    }

    requestAnimationFrame(function () { go(offset, false); update(); });
    window.addEventListener('resize', function () { go(offset, false); });

    var settle;
    track.addEventListener('scroll', function () {
      update();
      if (!loop) return;
      window.clearTimeout(settle);
      settle = window.setTimeout(function () {
        var d = domIndex();
        if (d === 0) go(count, false);
        else if (d === count + 1) go(1, false);
      }, 130);
    }, { passive: true });

    if (prevBtn) prevBtn.addEventListener('click', function () { step(-1); });
    if (nextBtn) nextBtn.addEventListener('click', function () { step(1); });
  }

  function initGalleries() {
    document.querySelectorAll('.ss-gallery').forEach(setup);
  }

  // Re-bind opted-out pairs as a single magnific-popup gallery (prev/next arrows
  // in the lightbox). Runs on load, once jQuery + magnific are ready.
  function initZoom() {
    var jq = window.jQuery;
    if (!jq || !jq.fn || !jq.fn.magnificPopup) return;
    document.querySelectorAll('[data-ss-zoom]').forEach(function (wrap) {
      if (wrap.__ssZoomBound) return;
      wrap.__ssZoomBound = true;
      var loop = wrap.dataset.loop === 'true';

      // Magnific's gallery always wraps around; when loop is off, hide the
      // lightbox prev/next arrow at the ends so it respects the loop variable.
      function syncArrows() {
        if (loop) return;
        var mfp = jq.magnificPopup.instance;
        if (!mfp || !mfp.items) return;
        var last = mfp.items.length - 1;
        var left = document.querySelector('.mfp-arrow-left');
        var right = document.querySelector('.mfp-arrow-right');
        if (left) left.style.visibility = mfp.index <= 0 ? 'hidden' : '';
        if (right) right.style.visibility = mfp.index >= last ? 'hidden' : '';
      }

      jq(wrap).magnificPopup({
        delegate: 'a.img-link:not(.ss-clone)',
        type: 'image',
        closeOnContentClick: true,
        showCloseBtn: true,
        gallery: { enabled: true },
        zoom: { enabled: true, duration: 300, easing: 'ease-in-out' },
        callbacks: {
          open: function () { setTimeout(syncArrows, 0); },
          change: function () { setTimeout(syncArrows, 0); }
        }
      });
    });
  }

  if (document.readyState !== 'loading') initGalleries();
  else document.addEventListener('DOMContentLoaded', initGalleries);

  if (document.readyState === 'complete') initZoom();
  else window.addEventListener('load', initZoom);
})();
</script>
{% endif %}