{% extends "base.html" %}
{% block title %}Collections — ExifTree{% endblock %}
{% block content %}

{% if collections %}
<div style="margin-bottom: 2rem;">
  <h2 style="font-size: 1.25rem; margin-bottom: 1rem;">Collections</h2>
  <div class="gear-grid">
    {% for c in collections %}
    <a href="/collections/{{ c.slug }}/" class="gear-card" style="color: inherit;">
      <h3>{{ c.title }}</h3>
      <span class="count">{{ c.image_count }} images</span>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %}

<h2 style="font-size: 1.25rem; margin-bottom: 1rem;">Images</h2>
<div class="image-grid">
  {% 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.title }}">
      {% elif img.thumbnail_small %}<img src="{{ img.thumbnail_small.url }}" alt="{{ img.title }}">{% endif %}
      {% include "includes/image_overlay.html" %}
    </a>
  </div>
  {% empty %}
  <div class="empty">No images yet.</div>
  {% endfor %}
</div>
{% endblock %}