{% block content %}
<div class="foreground"></div>
<div class="foregroundContent">
  <h2>"You can't judge a book by its cover but you can judge a person by their bookshelf" - Me, today.</h2>
  <p>Hover to reveal review<br />Read to reveal KNOWLEDGE</p>
  <h3>My Favorites</h3>
  <div class='flex wrap boxed'>
    {% for i in var.books.selection %}
    <div>
      <a href="#'{{i}}'">
        <img
          class="bookcover"
          alt="{{i}} cover"
          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
        />
      </a>
    </div>
    {% endfor %}
  </div>
  <div class="booklist flex wrap mobileV">
    {% for i in var.books.books %}
    <div id="'{{i}}'" class="bookReview">
      <div class="hover-container">
        <img
          class="bookcover"
          alt="{{i}} cover"
          src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
        />
        <div class="hover-element">
          <p>{{ var.books.books[i].review }}</p>
          <a href="{{ var.books.books[i].link }}">Book Source</a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}