{% 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>
  <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>
  <h3>All Reviews</h3>
  <p>Hover to reveal review<br />Read to reveal KNOWLEDGE</p>
  <div class="booklist flex wrap">
    {% for i in var.books.books %}
    <div id="'{{i}}'" class="bookReview">
      <div class='fullHeight flex'>
        <div>
          <div class='heightBox'>
            <img
              class="bookcover"
              alt="{{i}} cover"
              src="{{ url_for('static', filename=('photos/books/' + var.books.books[i].filename))}}"
            />
          </div>
        </div>
        <div class='vFlex emPad spaceBetween'>
          <div>
            <h4 class='nomargin'>{{ i }}</h4>
            <p class='nomargin'>{{ var.books.books[i].review }}</p>
          </div>
          <a href="{{ var.books.books[i].link }}"><p>Book Source</p></a>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}