{% extends "base.html" %}
{% block title %}{{ collection.title }} — {{ site_title }}{% endblock %}
{% block head %}
<link rel="alternate" type="application/json+oembed" href="https://photos.kennethreitz.org/oembed?url=https://photos.kennethreitz.org/collections/{{ collection.slug }}/&format=json" title="{{ collection.title }}">
{% endblock %}
{% block content %}
<div class="collection-header">
  <h1>{{ collection.title }}</h1>
  {% if collection.description %}<p class="desc">{{ collection.description }}</p>{% endif %}
  <p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-muted);">
    {{ images|length }} images
  </p>
</div>

<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" style="grid-column: 1 / -1;">This collection is empty.</div>
  {% endfor %}
</div>
{% endblock %}