{% 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>

<div class="grid">

        {% 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="/uploads/cover/{{ book.cover }}" width="100%" onerror="if (this.src != '//uploads/cover/{{ book.cover }}') this.src = '/static/img/default_cover.gif';"></a> 
<p>
<tbody>
<th>
{{ book.title }}</th>
<br>
<span style = "font-size: 14px;">
{% for author in  book.authors %}
{{ author.author_name }}<br> {% endfor %} </span>
</tbody>
</p>
</div>
  {% endfor %}
</div>

</div>
{% endblock %}