{% extends "page.html" %}

{% block content_body %}
{# build list of pages where the slugs correspond to an entries in page.wide_cards; some hackiness required to keep the
original order #}
{% set wcards = [] %}
{% for wide_card in page.wide_cards %}
{% do wcards.append(pages | selectattr("slug", "==", wide_card) | list | first) if pages | selectattr("slug", "==",
wide_card) | list | first is defined %}
{% endfor %}
{# now we can finally iterate over the pages listed in page.wide_cards #}
{% for wcard in wcards %}
<article class="wcard">
  <header>
    <h3><a href="{{ SITEURL }}/{{ wcard.title|lower }}/">{{ wcard.title }}</a></h3>
  </header>
  <div class="wcard-gallery">
    {% if wcard.featured_images is defined %}
    <div class="wcard-gallery-mask">
      <ul>
        {% for image in wcard.featured_images %}
        <li class="wcard-image" style="animation-delay: {{ loop.index0 * 5 }}s">
          <a href="{{ SITEURL }}/{{ image.post }}">
            <img src="{{ SITEURL }}/{{ image.pic }}" alt="{{ image.alt }}" {% if image.y_offset is defined %}
              style="top: {{ image.y_offset }};" {% endif %} />
          </a>
          <div class="wcard-tooltip">
            <p>{{ image.alt }}</p>
          </div>
        </li>
        {% endfor %}
    </div>
    {% endif %}
  </div>
</article>
{% endfor %}
{% endblock content_body %}

{% block content_footer %}
{% endblock content_footer %}