{% load form_helpers %}
{% load static %}

{% block extra_styles %}
    <style>
        #filterform-table {
            table-layout: fixed;
        }
        #filterform-table thead th:last-child {
            width: 5em;
        }
    </style>
{% endblock %}

<div class="modal fade" tabindex="-1" id="{{ filter_form_name }}_modal">
    <div class="modal-dialog modal-lg" style="width: 90% !important;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Filter {{ model_plural_name }}</h4>
            </div>
            <div class="modal-body">
                <ul id="tabs" class="nav nav-tabs">
                    {% if filter_form %}
                        <li role="presentation" class="active">
                            <a href="#default-filter" role="tab" data-toggle="tab">
                                Default
                            </a>
                        </li>
                    {% endif %}
                    {% if dynamic_filter_form %}
                        <li role="presentation" class="{% if not filter_form %} active {% endif %}">
                            <a href="#advanced-filter" role="tab" data-toggle="tab">
                                Advanced
                            </a>
                        </li>
                    {% endif %}
                </ul>
                <div class="tab-content">
                    {% if filter_form %}
                        <div id="default-filter" role="tabpanel" class="tab-pane active">
                            {% include 'inc/search_panel.html' %}
                        </div>
                    {% endif %}
                    {% if dynamic_filter_form %}
                        <div id="advanced-filter" role="tabpanel" class="tab-pane {% if not filter_form %} active {% endif %}">
                            <form id="dynamic-filter-form" class="form-horizontal" method="get" action=".">
                                <div class="">
                                    <table class="table" id="filterform-table">
                                        {{ dynamic_filter_form.management_form }}
                                        {% for form in dynamic_filter_form %}
                                            {% if forloop.first %}
                                                <thead>
                                                    <tr>
                                                        {% for field in form.visible_fields %}
                                                            <th>{{ field.label|capfirst }}</th>
                                                        {% endfor %}
                                                    </tr>
                                                </thead>
                                            {% endif %}
                                            <tr class="formset_row-dynamic-filterform">
                                                {% for field in form.visible_fields %}
                                                    <td>
                                                        {{ field }}
                                                    </td>
                                                {% endfor %}
                                            </tr>
                                        {% endfor %}
                                    </table>
                                </div>

                                <div class="text-right noprint">
                                    <button type="submit" class="btn btn-primary">
                                        <span class="mdi mdi-magnify" aria-hidden="true"></span> Apply
                                    </button>
                                    <button type="reset" class="btn btn-default">
                                        <span class="mdi mdi-close-thick" aria-hidden="true"></span> Clear
                                    </button>
                                </div>
                            </form>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
