{% load i18n %}
{% load url from simple_history_compat %}
{% load admin_urls %}
{% load getattribute from getattributes %}

<table id="change-history" class="border-gray-200 border-spacing-none border-separate mb-6 text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:dark:border-gray-800">
    <thead class="hidden lg:table-header-group">
        <tr>
            <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
                {% trans 'Object' %}
            </th>

            {% for column in history_list_display %}
                <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
                    {% trans column %}
                </th>
            {% endfor %}

            <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
                {% trans 'Date/time' %}
            </th>

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

            <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
                {% trans 'Changed by' %}
            </th>

            <th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm">
                {% trans 'Change reason' %}
            </th>
        </tr>
    </thead>

    <tbody>
        {% for action in action_list %}
            <tr class="block border mb-3 rounded-md shadow-sm lg:table-row lg:border-none lg:mb-0 lg:shadow-none dark:border-gray-800">
                <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans 'Object' %}">
                    <a href="{% url opts|admin_urlname:'simple_history' object.pk action.pk %}">
                        {{ action.history_object }}
                    </a>
                </td>

                {% for column in history_list_display %}
                    <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans column %}">
                        {{ action|getattribute:column }}
                    </th>
                {% endfor %}

                <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans 'Date/time' %}">
                    {{ action.history_date }}
                </td>

                <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans 'Comment' %}">
                    {{ action.get_history_type_display }}
                </td>

                <td class="align-middle flex border-t border-gray-200 font-normal px-3 py-2 text-left text-sm before:flex before:capitalize before:content-[attr(data-label)] before:items-center before:mr-auto before:text-gray-500 first:border-t-0 dark:before:text-gray-400 lg:before:hidden lg:first:border-t lg:py-3 lg:table-cell dark:border-gray-800" data-label="{% trans 'Changed by' %}">
                    {% if action.history_user %}
                        {% url admin_user_view action.history_user_id as admin_user_url %}

                        {% if admin_user_url %}
                            <a href="{{ admin_user_url }}">{{ action.history_user }}</a>
                        {% else %}
                            {{ action.history_user }}
                        {% endif %}
                    {% else %}
                        {% trans "None" %}
                    {% endif %}
                </td>

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