{% extends "backoffice/sidebar.html" %}
{% load backoffice %}
{% load humanize %}
{% load i18n %}
{% load static %}

{% block content %}
    <div class="columns">
        <div class="column">
            <div class="has-box">
                <div class="mb-2 is-flex is-align-items-center has-flex-items">
                    <div class="is-block">
                        {% block title %}{% endblock %}
                    </div>
                    <div style="margin-left: auto; margin-right: 1rem;">
                        {% include "backoffice/partials/search.html" %}
                    </div>
                    {% block export %}
                    {% endblock export %}
                </div>
                <hr>
                <div class="columns reverse-columns">
                    <div class="column">
                        {% if page_obj %}
                            <div class="display-grid">
                                <div class="table-container">
                                    <table class="table is-hoverable">
                                        <thead>
                                        <tr>
                                            {% for field in list_display %}
                                                <th class="is-capitalized">{{ page_obj.object_list|verbose_name:field }}</th>
                                            {% endfor %}
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% for obj in page_obj %}
                                            <tr>
                                                {% for field in list_display %}
                                                    {% if forloop.first %}
                                                        <th>
                                                            {{ obj|getattr:field }}
                                                        </th>
                                                    {% else %}
                                                        <td>
                                                            {{ obj|getattr:field }}
                                                        </td>
                                                    {% endif %}
                                                {% endfor %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="mt-3">
                                {% include "backoffice/partials/pagination.html" %}
                            </div>
                        {% else %}
                            <div class="is-flex is-full-height is-justify-content-center is-align-items-center has-flex-items">
                                <div class="subtitle is-6 py-4">{% trans "No results found." %}</div>
                            </div>
                        {% endif %}
                    </div>
                    {% if filter %}
                        <div class="column is-3 is-strong-border-left pl-5 ml-5">
                            {% include "backoffice/partials/filters.html" %}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock content %}

{% block footer %}
    {{ block.super }}
    {% if filter %}
        <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
        {{ filter.form.media }}
    {% endif %}
{% endblock %}
