{% extends 'layout.html' %}

{% set active_page = 'photo' %}
{% set title = 'Photography' %}

{% block body %}
<main>
  <h2>Photography</h2>
  <div class="photo-grid">
    {% for photo in photos %}
    <a href="{{ url_for('view_photo', photo_id=photo.id) }}">
      <img srcset="{{ photo_resize_url(photo, 200) }},
                   {{ photo_resize_url(photo, 300) }} 1.5x,
                   {{ photo_resize_url(photo, 400) }} 2x"
           src="{{ photo_resize_url(photo, 200) }}">
    </a>
    {% endfor %}
  </div>

  <nav>
    {% if page > 1 %}
    <a href="{{ url_for('photography', page=page-1) }}" class="nav-item next">&larr; Newer</a>
    {% endif %}
    {% if has_next %}
    <a href="{{ url_for('photography', page=page+1) }}" class="nav-item prev">Older &rarr;</a>
    {% endif %}
  </nav>
</main>
{% endblock %}