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

{% block breadcrumbs %}
    <div class="px-12">
        <div class="container mb-12 mx-auto -my-3">
            <ul class="flex">
                {% url 'admin:index' as link %}
                {% trans 'Home' as name %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

                {% url 'admin:app_list' app_label=opts.app_label as link %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}

                {% url opts|admin_urlname:'changelist' as link %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}

                {% url opts|admin_urlname:'change' object.pk|admin_urlquote as link %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=object|truncatewords:"18" %}

                {% trans 'History' as name %}
                {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=name %}
            </ul>
        </div>
    </div>
{% endblock %}

{% block content %}
    {% if actions_list %}
        <table class="border border-spacing-none border-separate rounded-md shadow-sm text-gray-700 w-full">
            <thead>
                <tr>
                    <th scope="col" class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm ">
                        {% translate 'Date/time' %}
                    </th>

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

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

            <tbody>
                {% for action in actions_list %}
                    <tr>
                        <th scope="row" class="align-middle border-t text-left px-3 py-3 font-normal text-sm">
                            {{ action.action_time|date:"DATETIME_FORMAT" }}
                        </th>

                        <td class="align-middle border-t text-left px-3 py-3 font-normal text-sm">
                            {{ action.user.get_username }}{% if action.user.get_full_name %} ({{ action.user.get_full_name }}){% endif %}
                        </td>

                        <td class="align-middle border-t text-left px-3 py-3 font-normal text-sm">
                            {{ action.get_change_message }}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>

        <p class="bg-gray-50 flex my-4 items-center p-3 rounded-md text-sm text-gray-400">
            {% if pagination_required %}
                {% for i in page_range %}
                    <span class="pr-4">
                        {% if i == actions_list.paginator.ELLIPSIS %}
                            {{ actions_list.paginator.ELLIPSIS }}
                        {% elif i == actions_list.number %}
                            <span class="font-medium text-primary-600">{{ i }}</span>
                        {% else %}
                            <a href="?{{ page_var }}={{ i }}" {% if i == actions_list.paginator.num_pages %} class="end" {% endif %}>{{ i }}</a>
                        {% endif %}
                    </span>
                {% endfor %}
            {% endif %}

            {{ actions_list.count }} {% if actions_list.count == 1 %}{% translate "entry" %}{% else %}{% translate "entries" %}{% endif %}
        </p>

    {% else %}
        <p>{% translate 'This object doesn’t have a change history. It probably wasn’t added via this admin site.' %}</p>
    {% endif %}
{% endblock %}
