{% comment %}
  A compact bordered card that looks exactly like embed/links/custom-link.html
  (avatar + a short line of text), but instead of pointing at an external URL
  that opens in a new tab, clicking the card opens a lightbox gallery of images
  in place — the same magnific-popup gallery embed/image/gallery.html uses for
  its zoomed view (prev/next arrows, loop-aware).

  Parameters (card look — identical to custom-link.html):
    author      - author / page / profile name (avatar initial + alt)
    avatar      - avatar image URL (optional; falls back to the author's initial)
    fill_avatar - if truthy, the avatar image fills the whole circle (cropped)
    width       - max width in px (optional; default 500)
    center      - center the avatar+text group (optional, default true;
                  pass center=false to left-align)
    text        - body text; may contain Markdown (e.g. a [link](url)). Capture
                  it first, then pass as text=<var>, or inline a string.

  Parameters (gallery):
    paths       - comma-separated list of image paths (whitespace/newlines
                  around each entry are trimmed). Pass two, three, or more.
    alts        - comma-separated alt text, matched to paths by position
    loop        - wrap the lightbox around endlessly (default false: the prev
                  arrow is hidden on the first photo, next on the last)

  Usage:
    {% include embed/image/popup.html
       author="author"
       avatar="https://.../logo.png"
       text="Zobacz **galerię zdjęć**."
       paths='/assets/img/posts/2026/elementarz-kredka-3.png,
              /assets/img/posts/2026/elementarz-kredka-4.png' %}
{% endcomment %}
{%- assign path_list = include.paths | split: ',' -%}
{%- assign alt_list = include.alts | split: ',' -%}
{%- assign is_loop = false -%}{%- if include.loop == true -%}{%- assign is_loop = true -%}{%- endif -%}
{% capture _popup_inner %}
  {% if include.avatar %}
    <img class="custom-link__avatar{% if include.fill_avatar %} custom-link__avatar--fill{% endif %}" src="{{ include.avatar }}" alt="{{ include.author }}" loading="lazy">
  {% else %}
    {% if include.author %}
    <span class="custom-link__avatar custom-link__avatar--placeholder" aria-hidden="true">{{ include.author | default: '?' | strip | slice: 0 | upcase }}</span>
    {% endif %}
  {% endif %}
  <div class="custom-link__body">{{ include.text | markdownify }}</div>
  <button type="button" class="custom-link__overlay popup-trigger" aria-label="{{ include.author }}"></button>
{% endcapture %}
<div class="custom-link custom-link--clickable{% unless include.center == false %} custom-link--centered{% endunless %}" data-loop="{{ is_loop }}"{% if include.width %} style="--card-width:{{ include.width }}px"{% endif %}>
  {{ _popup_inner }}
  {%- comment -%} Hidden anchors: the source of the lightbox gallery items. {%- endcomment -%}
  <div class="popup-gallery-src" hidden aria-hidden="true">
    {%- for p in path_list -%}
    <a class="popup-img" href="{{ p | strip | relative_url }}" data-alt="{{ alt_list[forloop.index0] | strip }}"></a>
    {%- endfor -%}
  </div>
</div>
<script>
(function () {
  var wrap = document.currentScript.previousElementSibling;
  if (!wrap || wrap.__popupBound) return;
  wrap.__popupBound = true;

  var trigger = wrap.querySelector('.popup-trigger');
  var loop = wrap.dataset.loop === 'true';
  var anchors = Array.prototype.slice.call(wrap.querySelectorAll('.popup-img'));
  if (!trigger || !anchors.length) return;

  var items = anchors.map(function (a) {
    return { src: a.getAttribute('href'), title: a.getAttribute('data-alt') || '' };
  });

  /* 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(jq) {
    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' : '';
  }

  /* jQuery + magnific arrive in a combined CDN bundle that may load after `load`
     on mobile, so poll until they're ready (up to ~5s) before opening. */
  function open(attempt) {
    var jq = window.jQuery;
    if (!jq || !jq.fn || !jq.magnificPopup) {
      if ((attempt || 0) < 25) {
        window.setTimeout(function () { open((attempt || 0) + 1); }, 200);
      }
      return;
    }
    jq.magnificPopup.open({
      items: items,
      type: 'image',
      closeOnContentClick: true,
      showCloseBtn: true,
      gallery: { enabled: items.length > 1 },
      /* No `zoom` here: it animates from a source DOM element, which a
         programmatic open (items array, no opener) doesn't have — leaving the
         instance broken on close so it can't reopen. */
      callbacks: {
        open: function () { setTimeout(function () { syncArrows(jq); }, 0); },
        change: function () { setTimeout(function () { syncArrows(jq); }, 0); }
      }
    }, 0);
  }

  trigger.addEventListener('click', function (e) { e.preventDefault(); open(0); });
})();
</script>