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

{% block content %}
<div class="app-auditlog module">
    <h1>{{ title }}</h1>

    {% if is_paginated %}
    <div class="paginator">
        {% if page_obj.has_previous %}
            <a href="?page={{ page_obj.previous_page_number }}">&laquo; Previous</a>
        {% endif %}
        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
        </span>
        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Next &raquo;</a>
        {% endif %}
    </div>
    {% endif %}

    <table class="admin-auditlog-table" style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr>
                <th>Changed At</th>
                <th>Operation</th>
                <th>User</th>
                <th>Source</th>
                <th>Reason</th>
                <th>Diff</th>
            </tr>
        </thead>
        <tbody>
        {% for log in audit_logs %}
            <tr>
                <td>{{ log.changed_at }}</td>
                <td>{{ log.operation }}</td>
                <td>{{ log.user_id|default:"–" }}</td>
                <td>{{ log.context.metadata.source|default:"–" }}</td>
                <td>{{ log.context.metadata.change_reason|default:"–" }}</td>
                <td>
                    {% with changes=log.diff|changed_fields %}
                    {% if changes %}
                    <details>
                        <summary>View ({{ changes|length }})</summary>
                        <ul style="margin: 0; padding-left: 1.2em; list-style: disc;">
                        {% for field, change in changes.items %}
                            <li>
                                <code>{{ field }}</code>:
                                <del style="color: #a33; text-decoration: line-through;">{{ change.old|default_if_none:"∅" }}</del>
                                <span style="color: #999;">→</span>
                                <ins style="color: #273; text-decoration: none; font-weight: 600;">{{ change.new|default_if_none:"∅" }}</ins>
                            </li>
                        {% endfor %}
                        </ul>
                    </details>
                    {% else %}–{% endif %}
                    {% endwith %}
                </td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="6">No audit records found.</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}