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

  <table class="library_table" id="table" style="width:100%; padding-bottom:60px;">
    <tr id="header">
      <th width="70px;">Cover</th>
      <th>Title</th>
      <th width="400px;">Author</th>
      <th width="100px;">Year</th>
      <th width="100px;">Category</th>
      <th width="100px;">Stack</th>
      {%if light%}
      {%else%}
      <th width="100px;">Add to stack</th>
      {%endif%}
    </tr>
        {% for book in books %}
    <tr>
    <td style= "padding: 5px;">
<img class="no_cover" id="{{ book.title }}" src="/cover/{{ book.cover }}" width="70" onerror="if (this.src != '/cover/{{ book.cover }}') this.src = '/static/img/default_cover.png';"></td>
      <td><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>

      <td>  {% for author in book.authors %}

              <li><a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a>  </li>

        {% endfor %}</td>
      <td>{{ book.year_published or '––'}}</td>
      <td>{{ book.category}}</td>
      <td>  {% for stack in book.stacks %}

              <li><a href="{{url_for('show_stack_by_id', id=stack.id)}}">{{ stack.stack_name }}</a>  </li>
              {% endfor %}
      </td>
      {%if light%}
      {%else%}
      <td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}">
          ==>
              </a></td>
      {%endif%}
      {% endfor %}

  </table>

</div>
<br>

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

  <table class="library_table" id="table" style="width:100%">
    <tr id="header">
      <th width="70px;">Cover</th>
      <th>Title</th>
      <th width="400px;">Author</th>
      <th width="100px;">Year</th>
      <th width="100px;">Category</th>
      <th width="100px;">Stack</th>
      {%if light%}
      {%else%}
      <th width="100px;">Add to stack</th>
      {%endif%}
    </tr>
        {% for book in books_all %}
    <tr>
      <td style= "padding: 5px;"><img class="no_cover" id="{{ book.title }}" src="/cover/{{ book.cover }}" width="80" onerror="if (this.src != '/cover/{{ book.cover }}') this.src = '/static/img/default_cover.png';"></td>
      <td><a href="{{url_for('show_book_by_id', id=book.id)}}">{{ book.title }}</a></td>

      <td>  {% for author in book.authors %}

              <li><a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a>  </li>

        {% endfor %}</td>
      <td>{{ book.year_published or '––'}}</td>
      <td>{{ book.category}}</td>
      <td>  {% for stack in book.stacks %}

              <li><a href="{{url_for('show_stack_by_id', id=stack.id)}}">{{ stack.stack_name }}</a>  </li>
                    {% endfor %}

      </td>
      {%if light%}
      {%else%}
      <td id='plus'><a href="{{url_for('add_to_stack', id=book.id)}}">
          ==>
              </a></td>
      {%endif%}
  {% endfor %}
  </table>
  <p>
    <a href="/books"> See all books </a>
  </p>

</div>

{% endblock %}