{% extends 'base.html' %}

{% block main %}
<div class="container">
  {% from "_formhelpers.html" import render_field %}
  <form method="POST">
    <div>{{ form.select(style="width: 100px; margin: 10px; float: left; font-size: 20px") }}</div>
      <div class="search">
      {{ render_field(form.search) }} </div>
      <button type="submit" class="button">browse</button>
           <p><br>
      {{ form.grid(style="font-size:20px")}}{{ form.listview(style="font-size:20px")}}</p>
</form>
    </div>

  <br>
  <h3 style="line-height:0px;">Results: "{{ query }}" included in {{ count }} out of {{ whole }} items </h3>
  <div style="height: 20px; background-color: yellow; line-height:4px;">
    <div style="background-color: black; width: {{ percentage }}%; height: 100%;"></div>
</div>
<br>
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <div class="alert alert-success">
        <ul>
        {% for message in messages %}
          <li>{{ message }}</li>
        {% endfor %}
        </ul>
      </div>
    {% endif %}
  {% endwith %}
<div class="grid" style="padding-bottom:60px;">

        {% for book in books|sort(attribute='title', reverse = False) %}


<div class="gridbox">
<a href="/books/{{ book.id }}">
<img class="no_cover" id="{{ book.title }}" src="/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '/cover/{{ book.cover }}') this.src = '/static/img/default_cover.png';"></a>
<p>
<tbody>
<th>
{{ book.title }} ({{ book.year_published or '?' }})</th>
<br>
<span style = "font-size: 14px;">
{% for author in  book.authors %}
{{ author.author_name }}<br> {% endfor %} </span>
</tbody>
</p>
</div>
  {% endfor %}
</div>

<div class="container" style= "border-top: dashed; border-width: 1px;">
  <h2> More books </h2>

<div class="grid">

{% for book in books_all|sort(attribute='title', reverse = False) %}

<div class="gridbox">
<a href="books/{{ book.id }}">
<img class="no_cover" id="{{ book.title }}" src="/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '/cover/{{ book.cover }}') this.src = '/static/img/default_cover.png';"></a>
<p>
<tbody>
<th>
{{ book.title }} ({{ book.year_published or '?' }})</th>
<br>
<span style = "font-size: 14px;">
{% for author in  book.authors %}
{{ author.author_name }}<br> {% endfor %} </span>
</tbody>
</p>
</div>
  {% endfor %}
</div>
</div>


  <p>
    <a href="/books"> See all books </a>
  </p>

</div>

{% endblock %}