{% extends "admin/base_site.html" %}
{% load i18n admin_urls %}

{% block content %}
    {% if action_list %}
        <table class="border-base-200 border-spacing-none border-separate mb-6 w-full lg:border lg:rounded-default lg:shadow-xs lg:dark:border-base-800">
            <thead class="hidden lg:table-header-group text-base-900 dark:text-base-100">
                <tr>
                    <th class="align-middle font-medium px-3 py-2 text-left">
                        {% translate 'Date/time' %}
                    </th>

                    <th class="align-middle font-medium px-3 py-2 text-left">
                        {% translate 'User' %}
                    </th>

                    <th class="align-middle font-medium px-3 py-2 text-left">
                        {% translate 'Action' %}
                    </th>
                </tr>
            </thead>

            <tbody>
                {% for action in action_list %}
                    <tr class="block border mb-3 rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-base-800">
                        <th class="align-middle flex border-t border-base-200 font-normal px-3 py-2 text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800" data-label="{% translate 'Date/time' %}">
                            {{ action.action_time|date:"DATETIME_FORMAT" }}
                        </th>

                        <td class="align-middle flex border-t border-base-200 font-normal px-3 py-2 text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800" data-label="{% translate 'User' %}">
                            {{ action.user.get_username }}{% if action.user.get_full_name %} ({{ action.user.get_full_name }}){% endif %}
                        </td>

                        <td class="align-middle flex border-t border-base-200 font-normal px-3 py-2 text-left before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto  first:border-t-0lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-base-800" data-label="{% translate 'Action' %}">
                            {{ action.get_change_message }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="bg-base-50 flex my-4 items-center p-3 rounded-default dark:bg-base-800">
            {% if pagination_required %}
                {% for i in page_range %}
                    <span class="pr-4">
                        {% if i == action_list.paginator.ELLIPSIS %}
                            {{ action_list.paginator.ELLIPSIS }}
                        {% elif i == action_list.number %}
                            <span class="font-medium text-primary-600">{{ i }}</span>
                        {% else %}
                            <a href="?{{ page_var }}={{ i }}" {% if i == action_list.paginator.num_pages %} class="end" {% endif %}>{{ i }}</a>
                        {% endif %}
                    </span>
                {% endfor %}
            {% endif %}

            {{ action_list.paginator.count }} {% blocktranslate count counter=action_list.paginator.count %}entry{% plural %}entries{% endblocktranslate %}
        </div>
    {% else %}
        <p>{% translate 'This object doesn’t have a change history. It probably wasn’t added via this admin site.' %}</p>
    {% endif %}
{% endblock %}
