{% extends 'base.html' %}

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

{% 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.filters.q.field_name}}" name="{{table.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">
                                    {{ table.filter.form.as_p }}
                                    <button class="btn btn-default" title="{% trans 'Filter' %}">
                                        {% fa5_icon 'filter' %}
                                        {% trans 'Apply filter' %}
                                    </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    {% comment %}
        Table section
    {% endcomment %}
    {% render_table table %}


{% endblock %}