{% extends "base" %}
{% block content %}
    <h1>Recent Books</h1>
    <div class="grid-container">
      {% for book in books %}
      <article class="book-card">
        <header class="grid-item">
          <hgroup>
            <h5>{{ book.title }}</h5>
            <!-- {% if book.series %}<p>{{ book.series.0 }} ({{ book.series.1 }})</p>{% endif %} -->
            <p>{{ book.author }}</p>
          </hgroup>
        </header>
        <img class="cover" src="/cover/{{ book.id }}" alt="book cover">
        <footer>
          <form>
            <fieldset role="group">
              <details class="dropdown">
                <summary role="button" class="outline">
                  Download 
                </summary>
                <ul>
                  <li><a href="#">Epub</a></li>
                  <li><a href="#">Pdf</a></li>
                </ul>
              </details>
            </fieldset>
          </form>
        </footer>
      </article>
      {% endfor %}
    </div>
{% endblock content %}