{% extends 'sbas/base.html' %}

{% block css %}
{% endblock %}


{% block content %}

    <div id="view-filter-options">
        <h3>Filter SBA Questions</h3>
        <div class="row">
            <div class="col-12 col-lg-3 mb-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span class="h6 mb-0">Filters</span>
                        <button class="btn btn-sm btn-outline-secondary d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#filter-collapse" aria-expanded="false">Toggle</button>
                    </div>
                    <div id="filter-collapse" class="collapse d-lg-block">
                        <div class="card-body">
                            <form action="" method="get">
                                {{ filter.form|crispy }}
                                <div class="mt-2">
                                    <button class="btn btn-primary btn-sm" type="submit">Apply</button>
                                    <a class="btn btn-secondary btn-sm" href="?">Reset</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 col-lg-9">
                <div class="table-responsive">
                    {% autoescape off %}
                        {% load render_table from django_tables2 %}
                        {% render_table table %}
                    {% endautoescape %}
                </div>
            </div>
        </div>

{% endblock %}