<!-- filter_and_sort_modal.html -->
{% load django_bootstrap5 %}

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#filterAndSortModal">
    Filter and Sort
</button>

<div class="modal fade" id="filterAndSortModal" tabindex="-1" aria-labelledby="filterAndSortModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="filterAndSortModalLabel">Filter and Sort</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% if table.sort_args or table.filter_args %}
                    <div class="mb-3">
                        <a href="{% url 'frontend' app_name=segments.1 model_name=segments.2 %}">{% bootstrap_button button_class="btn-outline-primary" button_type="button" content="x Clear" %}</a>
                    </div>
                {% endif %}
                {% if table.sort_args %}
                    <div class="mb-3">
                        Sorted by: <span class="badge bg-secondary">{{ table.sort_args|title }}</span>
                    </div>
                {% endif %}
                {% if table.filter_args %}
                    <div class="mb-3">
                        Filtered by:
                        {% for key, values in table.filter_args.items %}
                            {% for value in values %}
                                <span class="badge bg-secondary">{{ key|title }}: {{ value|title }}</span>
                            {% endfor %}
                        {% endfor %}
                    </div>
                {% endif %}
                {% if table.sort_args or table.filter_args %}
                    <hr class="mt-1 mb-1"/>
                {% endif %}
                <div class="mb-3">
                    <label><b>Sort by</b></label>
                    {% for field in table.sort_fields %}
                        <div class="mt-1">
                            <form method="GET" action=".">
                                <button type="submit" value="-{{ field }}" name="s" class="btn btn-primary">{{ field|title }} Descending</button>
                            </form>
                        </div>
                        <div class="mt-1">
                            <form method="GET" action=".">
                                <button type="submit" value="{{ field }}" name="s" class="btn btn-primary">{{ field|title }} Ascending</button>
                            </form>
                        </div>
                    {% endfor %}
                </div>
                <hr class="mt-1 mb-1"/>
                <label><b>Filter by</b></label>
                <form method="get">
                    {% for filter_field, filter_choices in table.list_filter_options.items %}
                        <div class="accordion" id="accordion{{ filter_field }}">
                            <div class="accordion-item">
                                <h2 class="accordion-header">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ filter_field }}" aria-expanded="false" aria-controls="collapse{{ filter_field }}" collapsed>
                                        {{ filter_field|title }}
                                    </button>
                                </h2>
                                <div id="collapse{{ filter_field }}" class="accordion-collapse collapse show" data-bs-parent="#accordion{{ filter_field }}">
                                    <div class="accordion-body">
                                        {% for choices in filter_choices %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" value="{{ choices|title }}" name="{{ filter_field }}" id="checkbox{{ filter_field }}{{ choices }}">
                                                <label class="form-check-label" for="checkbox{{ filter_field }}{{ choices }}">
                                                    {{ choices|title }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <button type="submit" class="btn btn-primary ms-2">Submit Filter</button>
                </form>
            </div>
        </div>
    </div>
</div>
