{% extends "beam/base.html" %}
{% load i18n %}
{% load beam_tags %}

{% block body_classes %}{{ block.super }} beam-list{% if component.model %}{% get_options component.model as options %} beam-list-{{ options.app_label }}-{{ options.model_name }}{% endif %}{% endblock %}

{% block content %}
    {% get_options component.model as options %}
    <section class="beam-main">
        <div class="container">
            {% block links %}
                <div class="float-right beam-links">
                    {% include "beam/partials/links.html" with links=viewset.links link_layout=component.link_layout %}
                </div>
            {% endblock %}
            {% block heading %}
                <h1>
                    {% if heading %}{{ heading }}{% else %}
                    {{ options.verbose_name_plural|capfirst }}
                    {% endif %}
                </h1>
            {% endblock %}

            {% block search %}
                {% if view.search_fields %}
                    <form method="get" id="search-form">
                        <div class="input-group">
                            <input name="q" type="text" value="{{ search_query }}" class="form-control" placeholder="{% trans 'Search the list below' %}" aria-label="{% trans 'Search the list below' %}" aria-describedby="search-form-input">
                            <div class="input-group-append">

                                {% if search_query %}
                                    <a href="{{ request.path }}" class="btn btn-outline-secondary">{% trans "Clear" %}</a>
                                {% endif %}
                                <input type="submit" class="btn btn-outline-primary" value="{% trans 'Search' %}"/>
                            </div>
                        </div>
                    </form>
                {% endif %}
            {% endblock %}

            {% block table %}
                <table class="table table-striped">
                    {% block table_head %}
                    <thead>
                    <tr>
                        {% for field in component.fields %}
                            <th scope="col">
                                {% with field_name=field|stringformat:"s" %}{# cast to string to support virtual fields #}
                                    {% if field_name in sortable_fields %}
                                        <a class="text-nowrap" href="{% sort_link field_name sorted_fields %}">
                                            {{ component.model|field_verbose_name:field|capfirst }}&nbsp;{% if field_name in sorted_fields %}<i class="fa fa-caret-up"></i>{% elif "-"|add:field_name in sorted_fields %}<i class="fa fa-caret-down"></i>{% endif %}
                                        </a>
                                        {% if field_name in sorted_fields or "-"|add:field_name in sorted_fields %}
                                            <a title="{% trans "reset sort" %}" href="{% sort_link "" "" %}"><i class="fa fa-remove"></i></a>
                                        {% endif %}
                                    {% else %}
                                        {{ component.model|field_verbose_name:field|capfirst }}
                                    {% endif %}
                                {% endwith %}
                            </th>
                        {% endfor %}
                        <th>{% trans "Actions" %}</th>
                    </tr>
                    </thead>
                        {% endblock %}
                    <tbody>
                    {% for object in object_list %}
                        <tr>
                            {% for field in component.fields %}
                                <td>
                                    {% include "beam/partials/detail_field.html" with object=object field=field %}
                                </td>
                            {% endfor %}
                            {% block list_item_links %}
                                <td class="pt-2">
                                    {% include "beam/partials/list_links.html" with links=viewset.links link_layout=component.list_item_link_layout object=object %}
                                </td>
                            {% endblock %}
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endblock %}

            {% block no_results %}
                {% if not object_list %}
                    <p class="alert alert-info" role="alert">
                        {% if search_query %}
                            {% blocktrans with name=options.verbose_name_plural %}Could not find any {{ name }} for query "{{ search_query }}"{% endblocktrans %}.
                        {% else %}
                            {% blocktrans with name=options.verbose_name_plural %}Could not find any {{ name }}{% endblocktrans %}.
                        {% endif %}
                        </p>
                {% endif %}
            {% endblock %}

            {% block pagination %}
                    <div class="row">
                        <div class="col-sm-6">
                            <p class="pt-2">
                                {% if object_list %}
                                    {% if is_paginated %}
                                        {% blocktrans with total=page_obj.paginator.count start=page_obj.start_index end=page_obj.end_index name=options.verbose_name_plural %}Showing {{ start }} to {{ end }} of {{ total }} {{ name }}{% endblocktrans %}
                                    {% elif page_obj.paginator.count == 1 %}
                                        {% blocktrans with total=page_obj.paginator.count start=page_obj.start_index end=page_obj.end_index name_singular=options.verbose_name %}Showing {{ total }} {{ name_singular }}{% endblocktrans %}
                                    {% else %}
                                        {% blocktrans with total=page_obj.paginator.count start=page_obj.start_index end=page_obj.end_index name_plural=options.verbose_name_plural %}Showing {{ total }} {{ name_plural }}{% endblocktrans %}
                                    {% endif %}
                                {% endif %}
                            </p>
                        </div>

                        <nav class="col-sm-6" aria-label="{% trans 'pagination' %}">
                            {% if is_paginated %}
                            <ul class="pagination justify-content-end">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="{% preserve_query_string page=page_obj.previous_page_number  %}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                            <span class="sr-only">{% trans "Previous" %}</span>
                                        </a>
                                    </li>
                                {% endif %}
                                {% for page_number in paginator.page_range %}
                                    <li class="page-item {% if page_number == page_obj.number %}active{% endif %}">
                                        <a class="page-link" href="{% preserve_query_string page=page_number %}">{{ page_number }}</a>
                                    </li>
                                {% endfor %}
                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="{% preserve_query_string page=page_obj.next_page_number  %}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                            <span class="sr-only">{% trans "Next" %}</span>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endblock %}
        </div>
    </section>
{% endblock %}
