{% extends 'base.html' %}

{% block main %}

<div class="container">
  {% from "_formhelpers.html" import render_field %}
  <form method="POST">
      <div class="search">
      {{ render_field(form.search) }} </div>
      <button type="submit" class="button">Search</button>
      </form>

  </div>

<div class="container">
  <h1 class="page-header">Search Results for: {{ query }}</h1>
  {% 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 style="width:100%">
    <tr>
        <th>Cover</th>
      <th>Title</th>
      <th>Author</th>
      <th>Filetype</th>
      <th>Tag</th>
    </tr>
        {% for book in books %}
    <tr>
      <td><img src="/uploads/cover/{{ book.cover }}" width="80"></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.fileformat }}</td>
      <td>{{ book.tag}}</td>
    </tr>
  {% endfor %}
  </table>

</div>

<div class="container" >
  <hr>
  <h2> Other books </h2>

  <table style="width:100%; ">
    <tr>
        <th>Cover</th>
      <th>Title</th>
      <th>Author</th>
      <th>Filetype</th>
      <th>Tag</th>
    </tr>
        {% for book in books_all %}
    <tr>
      <td><img src="/uploads/cover/{{ book.cover }}" width="80"></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.fileformat }}</td>
      <td>{{ book.tag}}</td>
    </tr>
  {% endfor %}
  </table>
  <p>
    <a href="/books"> See all books </a>
  </p>

</div>

{% endblock %}