{% extends "base.html" %}
{% 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>
<div>
<ul>
  {% for collection in collections %}
  <li>
  <div class="collectionbox">
    <div class="collectioncontainer">
      <img src="/media/{{collection.header}}" alt="Banner image for collection {{collection.label}}" style="width:100%;"/><br />
        <div class="collection-label"><a class="nav-link" href="{% url 'collection' collection.pid %}"><span>
          {{ collection.label }}<button>{{collection.manifests.all|length}} volume{{collection.manifests.all|length|pluralize}}</button>
        </span></a></div>
    </div></div>
  </li>
  {% endfor %}
</ul>
</div>
{% endblock content %}