index.html

{% extends "base.html" %}
{% block title %}The book list{% endblock %}
{% block content %}
<div class="container mx-auto my-5">
        <form class="px-3" action="{{ url_for('index') }}" method="get">
            <label for="search"><h1>Search book</h1></label>
            <div class="form-row">
                <div class="col">
                    <input type="search" class="form-control" id="search" name="q" {% if q %}value={{ q }}{% endif %}>
                </div>
                <div class="col-1">
                    <button type="submit" class="btn btn-primary">Search</button>
                </div>
            </div>
        </form>
    <div class="row mx-auto">
        {% if not books %}
            <p class="px-3">No results found. You search <b>{{ q }}</b></p>
        {% else %}
        {% for book in books %}
            <div class="col-lg-4 col-sm-6 my-3">
                <div class="card my-3 h-100">
                    <a class="books" href="{{ url_for('book', book_id=book['id']) }}">
                        <div class="row">
                                <div class="col-md-4 my-auto">
                                  <img src="https://covers.openlibrary.org/b/isbn/{{ book['isbn'] }}-M.jpg" class="card-img my-auto" alt="cover {{ book["title="] }}">
                                </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <div class="card-title"><h5>{{ book["title"] }}</h5></div>
                                    <div class="card-subtitle"><h6>{{ book['author'] }}</h6></div>
                                    <div class="card-text text-muted"><p>{{ book['year'] }}</p><p>ISBN {{ book['isbn'] }}</p></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        {% endfor %}
        {% endif %}
    </div>
{% include "pagination.html" %}
</div>


{% endblock %}