search.html

{% extends "base.html" %}
{% block content %}

<div class="container">
    {% if form.query.errors %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="alert alert-warning alert-dismissible fade show col-6 mt-5 shadow-lg p-3 mb-5 rounded"
                role="alert">
                {% for error in form.query.errors %}
                <strong>{{ error }}</strong><br>
                {% endfor %}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="row justify-content-center">
        <form class="card mt-5 col-10 col-md-8 text-white bg-primary shadow p-3 mb-5 rounded" method="POST"
            action="{{ url_for('search') }}">
            {{ form.hidden_tag() }}
            <div class="card-body">
                <!-- Search Query -->
                <div class="input-group flex-nowrap mb-3">
                    {{ form.query(class_='form-control') }}
                </div>
                <!-- Submit button -->
                <div class="text-center">
                    <div>
                        <button type="submit" class='btn btn-success'>
                            Search <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="row row-cols-1 row-cols-md-2 g-4">
        {% for review in reviews %}
        {% include 'reviews.html' %}
        {% endfor %}
    </div>
</div>
{% endblock %}