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

{% block breadcrumbs %}
<ol class="breadcrumbs">
<li><a href="{% url 'admin:index' %}">{% translate 'Home' %}</a></li>
<li><a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a></li>
<li><a href="{% url opts|admin_urlname:'changelist' %}">{{ module_name }}</a></li>
<li><a href="{% url opts|admin_urlname:'change' object.pk|admin_urlquote %}">{{ object|to_object_display_value|truncatewords:"18" }}</a></li>
<li aria-current="page">{% translate 'History' %}</li>
</ol>
{% endblock %}

{% block content %}
<div id="content-main" class="flex flex-col gap-6">
    <div class="flex items-center gap-4 mb-2">
        <div class="w-12 h-12 bg-gray-100 dark:bg-white/5 rounded-2xl flex items-center justify-center border border-black/5 dark:border-white/5">
            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <div>
            <h1 class="text-2xl font-black tracking-tight text-gray-900 dark:text-white">{% translate 'Change History' %}</h1>
            <p class="text-xs font-bold text-gray-500 uppercase tracking-widest">{{ object|to_object_display_value|truncatewords:"10" }}</p>
        </div>
    </div>

    <div id="change-history" class="apple-glass rounded-[32px] border border-white/20 shadow-xl overflow-hidden">
        {% if action_list %}
            <table class="w-full text-left border-collapse">
                <thead class="bg-black/5 dark:bg-white/5 border-b border-black/5 dark:border-white/5">
                    <tr>
                        <th scope="col" class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">{% translate 'Date/time' %}</th>
                        <th scope="col" class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">{% translate 'User' %}</th>
                        <th scope="col" class="px-6 py-4 text-[10px] font-black uppercase tracking-widest text-gray-500">{% translate 'Action' %}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-black/5 dark:divide-white/5">
                    {% for action in action_list %}
                    <tr class="hover:bg-blue-500/5 dark:hover:bg-blue-500/10 transition-colors">
                        <th scope="row" class="px-6 py-4 text-xs font-bold text-gray-700 dark:text-gray-300">{{ action.action_time|date:"DATETIME_FORMAT" }}</th>
                        <td class="px-6 py-4 text-xs font-medium text-gray-600 dark:text-gray-400">
                            <span class="inline-flex items-center gap-2 bg-black/5 dark:bg-white/5 px-3 py-1 rounded-full border border-black/5 dark:border-white/5">
                                <div class="w-4 h-4 rounded-full bg-blue-500"></div>
                                {{ action.user.get_username }}{% if action.user.get_full_name %} ({{ action.user.get_full_name }}){% endif %}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-xs font-medium text-gray-900 dark:text-white">{{ action.get_change_message }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            
            <div class="p-6 bg-black/5 dark:bg-white/5 flex items-center justify-between border-t border-black/5 dark:border-white/5">
                <div class="text-xs font-bold text-gray-500 uppercase tracking-widest">
                    {{ action_list.paginator.count }} {% blocktranslate count counter=action_list.paginator.count %}entry{% plural %}entries{% endblocktranslate %}
                </div>

                {% if pagination_required %}
                <nav class="paginator" aria-labelledby="pagination">
                  <ul class="flex items-center gap-1">
                    {% for i in page_range %}
                      {% if i == action_list.paginator.ELLIPSIS %}
                        <li class="px-2 font-black text-gray-400">{{ action_list.paginator.ELLIPSIS }}</li>
                      {% elif i == action_list.number %}
                        <li><span class="w-8 h-8 flex items-center justify-center bg-blue-500 text-white rounded-xl text-xs font-black shadow-lg shadow-blue-500/30">{{ i }}</span></li>
                      {% else %}
                        <li><a href="?{{ page_var }}={{ i }}" class="w-8 h-8 flex items-center justify-center hover:bg-black/5 dark:hover:bg-white/5 text-gray-500 hover:text-blue-500 rounded-xl text-xs font-bold transition-all">{{ i }}</a></li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </nav>
                {% endif %}
            </div>
        {% else %}
            <div class="p-10 text-center">
                <p class="text-gray-500 font-medium">{% translate 'This object doesn’t have a change history. It probably wasn’t added via this admin site.' %}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}