{% extends 'base.html' %}

{% load django_tables2 %}
{% load i18n static fontawesome_5 %}

{% block head %}
    {% comment %}
        dal documentation (django-autocomplete-light) states using form.media for adding needed scripts.
        This does not work properly with modal forms, as the scripts are not loaded properly inside the modal.
        Therefore the script linkages from form.media have been extracted and put inside dal/scripts.html to ensure
        these scripts are loaded when needed.
    {% endcomment %}
    {% include 'dal/scripts.html' %}
{% endblock %}

{% block body %}
    <div class="col-md">
        {% if table.title %}
            <div class="row">
                <h3>
                    {{ table.title }}
                </h3>
            </div>
            {% if table.subtitle %}
                <div class="row mb-2">
                    <div class="col-lg">
                        <small>
                            {{ table.subtitle }}
                        </small>
                    </div>
                </div>
            {% endif %}
        {% endif %}
        <div class="row">
            {% if table.add_new_entries %}
            <div class="col-md">
                <a href="{{ table.add_new_url }}">
                    <button class="btn btn-default" title="{% trans 'New entry' %}">
                        <i class="fas fa-plus mr-2"></i>
                        {% trans 'New' %}
                    </button>
                </a>
            </div>
            {% endif %}
        </div>

        {% comment %}
            Search input and rpp selector
        {% endcomment %}
        <form method="get">
            <div class="row my-1">
                <div class="col-sm-12 col-md-8 col-lg-6">
                        <div class="input-group">
                            <input id="id_{{table.filter.query_filter.filters.q.field_name}}" name="{{table.filter.query_filter.filters.q.field_name}}" type="text" class="form-control" aria-label="{% trans 'Search for keywords' %}" placeholder="{% trans 'Search' %}" value="{{ request.GET.q }}">
                            <div class="input-group-append" title="{% trans 'Start search' %}">
                                <button type="submit" class="btn btn-default input-group-text">
                                    <span class="">
                                        {% fa5_icon 'search' %}
                                    </span>
                                </button>
                            </div>
                        </div>
                </div>
                <div class="col-md d-flex justify-content-end">
                    <div class="dropdown show">
                        <div class="btn btn-default dropdown-toggle" href="#" role="button" id="rppToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {% trans 'Results per page' %}
                        </div>
                        <div class="dropdown-menu dropdown-menu-right">
                            {% for rpp_option in table.results_per_page_choices %}
                                <a class="dropdown-item {% if table.results_per_page_chosen == rpp_option %}selected{% endif %}" href="{% querystring table.results_per_page_parameter=rpp_option %}">
                                    {{ rpp_option }}
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>


            {% comment %}
                Filter section
            {% endcomment %}
            <div class="row">
                <div class="col-md">
                    <div class="card">
                        <div id="filterHeader" class="card-header cursor-pointer" data-toggle="collapse" data-target="#filter" aria-expanded="true" aria-controls="filter">
                            <h5>
                                {% fa5_icon 'filter' %}
                                {% trans 'Filter' %}
                            </h5>
                        </div>
                        <div id="filter" class="collapse" aria-labelledby="filterHeader">
                            <div class="card-body">
                                <div class="">
                                    <div class="">
                                        {% with table.filter.selection_filter.form as form %}
                                            {% include 'filter/query_filter.html' %}
                                        {% endwith %}
                                    </div>
                                    <hr>
                                    <div class="mt-3">
                                        {% with table.filter.query_filter.form as form %}
                                            {% include 'filter/query_filter.html' %}
                                        {% endwith %}
                                    </div>
                                    <hr>
                                    <div class="mt-3">
                                        {% with table.filter.checkbox_filter.form as form %}
                                            {% include 'filter/checkbox_filter.html' %}
                                        {% endwith %}
                                    </div>
                                    <hr>
                                    <div class="mt-3">
                                        <button class="btn btn-default" title="{% trans 'Filter' %}">
                                            {% fa5_icon 'filter' %}
                                            {% trans 'Apply filter' %}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {% comment %}
        Table section
    {% endcomment %}
    {% render_table table %}


{% endblock %}