{% extends "base.html" %}
{% from "macros/photo.html" import picture %}
{% block content %}
{% if photo %}
<section class="hero" data-hero>
  <div class="hero-image kenburns">
    {{ picture(photo, 'optimized', 'hero-photo', '100vw', true) }}
  </div>
  <div class="hero-veil"></div>
  <div class="hero-copy" data-chrome>
    <p class="eyebrow">Picture of the Day</p>
    <h1>{{ photo.title or "Today" }}</h1>
    {% if photo.description %}<p class="lede">{{ photo.description }}</p>{% endif %}
    <p class="credit">
      {% if photo.photographer %}{{ photo.photographer }}{% endif %}
      {% if photo.source %} · {{ photo.source }}{% endif %}
    </p>
  </div>
  <div class="hero-controls" data-chrome>
    {% if prev_photo %}<a class="ghost" href="/photo/{{ prev_photo.public_id }}" aria-label="Previous photograph">Previous</a>{% endif %}
    {% if next_photo %}<a class="ghost" href="/photo/{{ next_photo.public_id }}" aria-label="Next photograph">Next</a>{% endif %}
    <a class="ghost" href="/slideshow">Slideshow</a>
    <a class="ghost" href="/photo/{{ photo.public_id }}">Information</a>
    <button class="ghost" type="button" data-fullscreen>Fullscreen</button>
    <a class="ghost" href="/gallery">Gallery</a>
  </div>
</section>
{% else %}
<section class="empty-page">
  <h1>A quiet place for photographs</h1>
  <p>No photographs have been published yet.</p>
</section>
{% endif %}
{% endblock %}