{% for img in images %}
<div>
  <a href="/images/{{ img.id }}/" class="image-card">
    {% if img.thumbnail_medium %}<img src="{{ img.thumbnail_medium.url }}" alt="{{ img.ai_title|default:img.title }}" loading="lazy">
    {% elif img.thumbnail_small %}<img src="{{ img.thumbnail_small.url }}" alt="{{ img.ai_title|default:img.title }}" loading="lazy">{% endif %}
    {% include "includes/image_overlay.html" %}
  </a>
</div>
{% endfor %}
{% if has_more %}
<div hx-get="{{ request.path }}?page={{ page|add:1 }}{% if selected_year %}&year={{ selected_year }}{% endif %}"
     hx-trigger="revealed"
     hx-swap="outerHTML"
     style="grid-column: 1 / -1; text-align: center; padding: 2rem;">
  <span style="color: var(--text-muted);">Loading more...</span>
</div>
{% endif %}