{% load django_bootstrap5 %}
{% load i18n %}

<div class="row mb-3 justify-content-between">
    <div class="col-12 col-md-8">
        <button type="button" class="btn btn-outline-accent btn-sm rounded mb-3" data-bs-toggle="modal"
                data-bs-target="#filter-modal">
            <i class="fa fa-sliders fa-fw"></i> {% translate "Filters" %}
        </button>
        <div class="d-flex column-gap-4 row-gap-4 align-items-center flex-row flex-wrap">
            {% for field, field_data in active_filters.items %}
                {% include 'helpers/filter_row.html' with filter_name=field filter_items=field_data %}
            {% endfor %}
        </div>
    </div>
</div>

<div class="modal fade" id="filter-modal" tabindex="-1" aria-labelledby="filter-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg modal-fullscreen-md-down">
        <div class="modal-content">
            <div class="modal-body mx-5 mt-4 mb-3">
                <form role="form" method="GET">
                    <div class="row">
                        <div class="col-12 d-grid gap-3">
                            <h3 class="mb-3">{% translate "Filter" %}</h3>
                            <div class="row gap-3">
                                <div class="col-10">
                                    {% bootstrap_form filter_form %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-accent px-3 mt-2">
                        {% translate "Apply" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
