{% extends "layout.twig" %}

{% block content %}
<div class="container">

  {# Hero #}
  <div class="block block--hero block--size-default block--full-width block--blue block--media-image dimple dimple--default">
    <div class="container">
      <div class="block__content">
        <h1 class="block__title">What We're Up To</h1>
        <div class="block__copy">
          <p>
            Find out what we’re doing by seeing it through the eyes of our participants, alumni, coaches, events, and partners.
          </p>
        </div>
      </div>
      <div class="block__media">
        {# keep the same style: use a local image if you have it #}
        <img decoding="async" width="351" height="423"
             src="/css/istockphoto-1196444157-612x612-removebg-preview-2-e1634129505143.webp"
             class="block__img" alt="">
      </div>
    </div>
  </div>

  {# Filters (static UI for now) #}
  <div class="facet__filters block--full-width block--blue">
    <div class="container">
      <div class="facet__label h4__mimic"><span class="screen-reader-text">Filter by: </span>Categories:</div>
      <div class="facetwp-facet facetwp-type-checkboxes" aria-label="Categories" role="group">
        <div class="facetwp-checkbox" role="checkbox" aria-checked="false" tabindex="0"><span class="facetwp-display-value">Feature Stories</span></div>
        <div class="facetwp-checkbox" role="checkbox" aria-checked="false" tabindex="0"><span class="facetwp-display-value">News</span></div>
        <div class="facetwp-checkbox" role="checkbox" aria-checked="false" tabindex="0"><span class="facetwp-display-value">Events</span></div>
      </div>
      <p style="margin-top:10px; opacity:.85; font-size:14px;">
        (Filtering UI is present; if you want real category filtering, tell me and I’ll wire it to the database.)
      </p>
    </div>
  </div>

  {# Sort (static UI for now) #}
  <div class="facet__sort">
    <div class="facet__label">Sort By:</div>
    <div class="facetwp-sort">
      <select class="facetwp-sort-select" disabled>
        <option selected>Latest News</option>
      </select>
    </div>
  </div>

  <h2 class="screen-reader-text">Results:</h2>

  {# Cards from DB #}
  <div class="cards cards--archive cards--news cards--row-four dimple dimple--bg-blue">
    {% if items is empty %}
      <p style="padding: 20px;">No stories found yet. Add rows to the <code>articles</code> table.</p>
    {% else %}
      {% for a in items %}
        <div class="card card--archive">
          <a class="card__link" href="#">
            <div class="card__media">
              <img width="400" height="300" src="{{ a.image_url }}" class="card__img" alt="" decoding="async" loading="lazy">
            </div>
            <div class="card__content">
              <h3 class="card__title h6__mimic">{{ a.title }}</h3>
            </div>
          </a>
        </div>
      {% endfor %}
    {% endif %}
  </div>

  {# Pagination #}
  {% if pages > 1 %}
    <nav class="navigation pagination" role="navigation" aria-label="Posts pagination" style="margin-top: 18px;">
      <h2 class="screen-reader-text">Posts pagination</h2>
      <div class="facetwp-pager" role="navigation">
        {% set prev = page - 1 %}
        {% set next = page + 1 %}

        <a class="facetwp-page first {{ page == 1 ? 'active' : '' }}" href="/stories?page=1" aria-label="Go to page 1">1</a>

        {% if page > 2 %}
          <a class="facetwp-page dots" href="#" onclick="return false;" aria-label="More pages">...</a>
        {% endif %}

        {% for p in range(max(2, page-1), min(pages, page+1)) %}
          <a class="facetwp-page {{ p == page ? 'active' : '' }}" href="/stories?page={{ p }}" aria-label="Go to page {{ p }}" {{ p == page ? 'aria-current="true"' : '' }}>{{ p }}</a>
        {% endfor %}

        {% if page < pages-1 %}
          <a class="facetwp-page dots" href="#" onclick="return false;" aria-label="More pages">...</a>
        {% endif %}

        {% if pages > 1 %}
          <a class="facetwp-page last {{ page == pages ? 'active' : '' }}" href="/stories?page={{ pages }}" aria-label="Go to page {{ pages }}">{{ pages }}</a>
        {% endif %}

        {% if page < pages %}
          <a class="facetwp-page next" href="/stories?page={{ next }}" aria-label="Go to next page">
            <span class="screen-reader-text">Go to Next Page</span>
          </a>
        {% endif %}
      </div>
    </nav>
  {% endif %}

</div>
{% endblock %}