{% load i18n %}

<div class="row" id="select_per_page_and_search_row">
    <div class="col-md-6">
        <div class="input-group input-group-sm">
            <label for="paginate_by_select" hidden>{% trans "Choose Items Per Page" %}</label>
            <select class="form-control form-control-sm" id="paginate_by_select" aria-labelledby="Select Number Of Items Per Page">
                <option value="10" {% if paginate_by == 10 %}selected{% endif %}>{% trans "10 Items Per Page" %}</option>
                <option value="25" {% if paginate_by == 25 %}selected{% endif %}>{% trans "25 Items Per Page" %}</option>
                <option value="50" {% if paginate_by == 50 %}selected{% endif %}>{% trans "50 Items Per Page" %}</option>
                <option value="100" {% if paginate_by == 100 %}selected{% endif %}>{% trans "100 Items Per Page" %}</option>
            </select>
            <div class="input-group-append">
                <button class="btn btn-default btn-sm button-default-bg-color" type="button" id="clear_all_button" onclick="clear_all()">
                    <i class="fas fa-ban"></i>{% trans "Clear All" %}
                </button>
            </div>
        </div>
    </div>
    {% if should_hide_search %}
        <div class="col-md-6"></div>
    {% else %}
        <div class="col-md-6">
            <div class="input-group input-group-sm float-right" id="search_group">
                <input type="text" class="form-control float-right" id="search_text" value="{{ search_by }}" autocomplete="off">
                <div class="input-group-append">
                    <button type="button" class="btn btn-sm" onclick="search()">
                        <i class="fas fa-search no-right-margin"></i>
                    </button>
                    <button type="button" class="btn btn-sm" id="clear_search_button"
                        onclick="clear_search()" disabled>
                        {% trans "Clear Search" %}
                    </button>
                </div>
            </div>
        </div>
    {% endif %}
</div>
<div class="row" id="filters_row">
    <div class="col-12">
        {% if filters %}
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="panel-title">
                                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_one"
                                        aria-expanded="false" aria-controls="collapse_one" class="select-filters collapsed">
                                        <i class="fas fa-caret-down"></i>{% trans "Filters" %}
                                    </a>
                                </h5>
                            </div>
                            <div class="col-md-6">
                                <div class="input-group input-group-sm float-right" id="apply_and_clear_filters_buttons">
                                    <button type="button" class="btn btn-default btn-sm button-default-bg-color" id="apply_filters_button"
                                        onclick="apply_filters();" disabled>
                                        {% trans "Apply Filters" %}
                                    </button>
                                    <button type="button" class="btn btn-default btn-sm button-default-bg-color" id="clear_filters_button" onclick="clear_filters()"
                                        disabled>
                                        <i class="fas fa-filter"></i>{% trans "Clear Filters" %}
                                    </button>
                                </div>
                            </div>
                            <div class="col-12">
                                <span id="hidden_filters_message_div">
                                    <strong> {% trans "Note" %}: </strong>
                                    {% trans "Special hidden filters are currently being applied. To remove them, click clear filters." %}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div id="collapse_one" class="panel-collapse collapse {% if using_filters %}in{% endif %}" role="tabpanel"
                         aria-labelledby="headingOne">
                        <div class="panel-body">
                            <div class="container-fluid">
                                <div class="row">
                                    {% for filter in filters %}
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <div class="filter-header" title="{{ filter.html_name }}">
                                                    {{ filter.html_name }}
                                                    <span id="{{ filter.filter_name }}_quantity_span"></span>
                                                </div>

                                                {{ filter.html_code|safe }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {# div for collapse #}
                </div>
            </div>
        {% else %}
            <hr>
        {% endif %}
    </div>
</div>
<div class="row" id="table_sort_and_filter_select_row">
    <div class="col-sm-6">
        <div class="input-group sfs-all-clear-group input-group-sm">
            {% if show_all_in_filter %}
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <label for="select_all_pages_checkbox">{% trans "All In Filter" %}</label>
                        <input type="checkbox" id="select_all_pages_checkbox">
                    </div>
                </div>
            {% endif %}
            {% if show_clear_sorts %}
                <div class="input-group-append">
                    <button class="btn btn-sm" type="button" id="clear_sorts_button" onclick="clear_sorts()" disabled>
                            <i class="fas fa-arrows-alt-v"></i>{% trans "Clear Sorts" %}
                    </button>
                </div>
            {% endif %}
        </div>
    </div>
    <div class="col-sm-6">
        <div class="float-right">
            <div class="input-group sfs-total-group input-group-sm">
                <div class="input-group-prepend">
                    <div class="input-group-text">
                        <strong>{% trans "Total" %}: {{ total_object_count }}</strong>
                    </div>
                </div>
                {% if filters or show_all_in_filter %}
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <strong>{% trans "Filter Total" %}: {{ filtered_object_count }}</strong>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
