{% extends "base.html" %}
{% load wagtailcore_tags %}
{% load static %}

{% block body_class %}template-homepage{% endblock %}

{% block content %}
<h1 class='uk-heading-xlarge uk-text-center'>Readux</h1>
<h2 class='uk-heading-medium uk-text-center'>Read. Annotate. Publish.</h2>
<p class='uk-text-lead uk-text-center'>Log in to Readux to read digitized collections, make your own notes, and publish your marked-up edition online.</p>

{% include "snippets/sort_dropdown.html" %}


  <div id="wrap">
  {% for volume in volumes %}
    <div id="box">
    <div id="boxInner">
      <a class="nav-link" href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
        <img src="{{ volume.canvas_set.first.thumbnail_crop_volume }}" alt="First page of {{volume.label}}" onerror="this.onerror=null;this.src='{% static '/images/image_not_found.jpg' %}';"/>
      </a>
      <div class="innerContent"><p>
      <a class="nav-link" href="{% url 'page' volume.pid volume.canvas_set.first.pid %}">
      <p>{{ volume.label }}</p>
  </a></p>
  <p><em>Author:</em> {{volume.author}}<br/>
  <em>Date Published:</em> {{volume.published_date}}<br/>
  Added {{volume.created_at}}</p></div>
    </div></div>
  {% endfor %}
  </div>
{% endblock content %}