{% extends 'base.html' %}

{% set meta = index %}

{% block scripts %}
  {% script 'index' %}
{% endblock scripts %}

{% block content %}
<article>
<header>
    <h1>
        <span class="break invisible">e.e.</span>
        <span class="break invisible">cummings</span>
        <span class="break invisible">free poetry archive</span>
    </h1>
<div class="break big"></div>
</header>
<section class="intro">
    <p>{{ index.description }} Four books are now available.</p>
</section>
<section class="booklist">
  {% for book in books.list %}
  <section class="book" data-public-domain="{{ book.public_domain }}">
    <a href="/book/{{ book.slug }}/">
      <div class="book__cover">
          <picture>
            <source type="image/webp" srcset="{% static '/assets/img/' + book.slug + '.webp' %}">
            <source type="image/jpeg" srcset="{% static '/assets/img/' + book.slug + '.jpg' %}">
            <img src="{% static '/assets/img/' + book.slug + '.jpg' %}"
                 {% if book.img.width %}width="{{ book.img.width }}"{% endif %}
                 {% if book.img.height %}height="{{ book.img.height }}"{% endif %}
                 alt="{{ book.title }} >">
          </picture>
      </div>
      <h4 class="book__title">{{ book.title }}</h4>
    </a>
  </section>
  {% endfor %}
</section>
</article>
{% endblock %}