{% load i18n custom_filters %}

{% if model_events %}
<div class="table-responsive px-1 scrollbar mt-3">
    <table class="table align-items-center table-flush table-hover mt-3">
        <thead>
            <tr class="bg-body-highlight">
                <th>{% trans "Timestamp" %}</th>
                <th>{% trans "User" %}</th>
                <th>{% trans "Action" %}</th>
                <th>{% trans "Model" %}</th>
                <th>{% trans "Object ID" %}</th>
                <th>{% trans "Object Representation" %}</th>
                <th>{% trans "Field" %}</th>      {# Dedicated column for field name #}
                <th>{% trans "Old Value" %}</th> {# Dedicated column for old value #}
                <th>{% trans "New Value" %}</th> {# Dedicated column for new value #}
            </tr>
        </thead>
        <tbody>
            {% for event in model_events %}
                {% if event.field_changes %}
                    {# Loop through each individual field change for this event #}
                    {% for change in event.field_changes %}
                        <tr>
                            {# Display common event details using rowspan for the first change #}
                            {% if forloop.first %}
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.datetime|date:"Y-m-d H:i:s" }}
                                </td>
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.user.username|default:"Anonymous" }}
                                </td>
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.event_type_display }}
                                </td>
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.model_name|title }}
                                </td>
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.object_id }}
                                </td>
                                <td rowspan="{{ event.field_changes|length }}">
                                    {{ event.object_repr }}
                                </td>
                            {% endif %}
                            
                            {# Display the specific field change details in their own columns #}
                            <td><strong>{{ change.field }}</strong></td>
                            <td>
                                {% if change.old is not None %}
                                    <pre style="white-space: pre-wrap; word-break: break-all; font-size: 0.85em; background-color: #f8f9fa; padding: 5px; border-radius: 3px;">{{ change.old }}</pre>
                                {% else %}
                                    (None)
                                {% endif %}
                            </td>
                            <td>
                                {% if change.new is not None %}
                                    <pre style="white-space: pre-wrap; word-break: break-all; font-size: 0.85em; background-color: #f8f9fa; padding: 5px; border-radius: 3px;">{{ change.new }}</pre>
                                {% else %}
                                    (None)
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                {% else %}
                    {# Fallback for events with no specific field changes (e.g., CREATE, DELETE) #}
                    <tr>
                        <td>{{ event.datetime|date:"Y-m-d H:i:s" }}</td>
                        <td>{{ event.user.username|default:"Anonymous" }}</td>
                        <td>{{ event.event_type_display }}</td>
                        <td>{{ event.model_name|title }}</td>
                        <td>{{ event.object_id }}</td>
                        <td>{{ event.object_repr }}</td>
                        {# Span the 'Field', 'Old Value', 'New Value' columns #}
                        <td colspan="3">
                            {% if event.event_type_display == "Create" %}
                                {% trans "Object created." %}
                            {% elif event.event_type_display == "Delete" %}
                                {% trans "Object deleted." %}
                            {% else %}
                                {% trans "No specific field changes recorded." %}
                            {% endif %}
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
        </tbody>
    </table>
    
</div>
{% else %}
<p>{% trans "No model change audit events found." %}</p>
{% endif %}