{% extends "aa_discord_audit/base.html" %}
{% load i18n %}
{% load static %}

{% block page_title %}
    {% translate "Discord Audit Config Changes" %}
{% endblock %}

{% block extra_javascript %}
    {% include "aa_discord_audit/_datatables_init.html" %}
    <script src="{% static 'aa_discord_audit/js/payload_modal.js' %}" defer></script>
{% endblock %}

{% block content %}

    <nav aria-label="{% translate 'breadcrumb' %}" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'aa_discord_audit:run_list' %}">{% translate "Discord Audit" %}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{% translate "Config changes" %}</li>
        </ol>
    </nav>

    <div class="d-flex align-items-center gap-2 mb-3">
        <h5 class="mb-0">{% translate "Operator config changes" %}</h5>
        <span class="badge bg-secondary">{{ total_count }}</span>
    </div>

    <p class="text-muted small">
        {% translate "Append-only forensic log of every operator edit to BotAccountUid, ProtectedDiscordMember, ManagedRoleException, and FindingActionOverride. Survives retention pruning of AuditRun rows." %}
    </p>

    <form method="get" class="mb-3 d-flex align-items-center gap-2 flex-wrap">
        <label for="cl-q" class="form-label mb-0">{% translate "Search" %}</label>
        <input id="cl-q" type="search" name="q" value="{{ search_query }}" class="form-control w-auto" placeholder="{% translate 'actor, model, or object pk' %}">

        <label for="cl-model" class="form-label mb-0">{% translate "Model" %}</label>
        <select id="cl-model" name="model_name" class="form-select w-auto">
            <option value="">{% translate "(any)" %}</option>
            {% for m in model_choices %}
                <option value="{{ m }}"{% if m == selected_model %} selected{% endif %}>{{ m }}</option>
            {% endfor %}
        </select>

        <label for="cl-action" class="form-label mb-0">{% translate "Action" %}</label>
        <select id="cl-action" name="action" class="form-select w-auto">
            <option value="">{% translate "(any)" %}</option>
            {% for a in actions %}
                <option value="{{ a }}"{% if a == selected_action %} selected{% endif %}>{{ a }}</option>
            {% endfor %}
        </select>

        <button type="submit" class="btn btn-primary">{% translate "Apply" %}</button>
    </form>

    <div class="table-responsive">
        {# Gate DataTables on a non-empty body: the {% empty %} #}
        {# placeholder below is a single <td colspan>, which #}
        {# DataTables rejects with "Incorrect column count" #}
        {# (tn/18). An empty table has nothing to sort/page. #}
        <table class="table table-striped"
               {% if rows %}data-audit-table{% endif %}
               data-order='[[1, "desc"]]'
               data-paging="{{ client_mode|yesno:'true,false' }}">
            <thead>
                <tr>
                    <th scope="col">{% translate "ID" %}</th>
                    <th scope="col">{% translate "Created at" %}</th>
                    <th scope="col">{% translate "Model" %}</th>
                    <th scope="col">{% translate "Object pk" %}</th>
                    <th scope="col">{% translate "Action" %}</th>
                    <th scope="col">{% translate "Actor" %}</th>
                    <th scope="col">{% translate "Payload" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                    <tr>
                        <td>{{ row.obj.pk }}</td>
                        <td data-order="{{ row.obj.created_at|date:'U' }}" title="{{ row.created_abs }}">{{ row.created_rel }}</td>
                        <td><code>{{ row.obj.model_name }}</code></td>
                        <td>{{ row.obj.object_pk }}</td>
                        <td>
                            <span class="badge {{ row.action_css }}">{{ row.action_label }}</span>
                        </td>
                        <td>
                            {{ row.obj.actor_username }}
                            {% if row.obj.actor_user_id %}
                                <small class="text-muted">#{{ row.obj.actor_user_id }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {# The trigger opens the shared #payload-modal; the rendered #}
                            {# diff / snapshot markup lives in the hidden source div below #}
                            {# and is cloned into the modal by payload_modal.js. #}
                            {# Icon-only trigger: the visible label is dropped, so the #}
                            {# action name lives in title / aria-label for a11y + hover. #}
                            <button type="button"
                                    class="btn btn-outline-secondary btn-sm"
                                    data-bs-toggle="modal"
                                    data-bs-target="#payload-modal"
                                    data-payload-source="#payload-src-{{ row.obj.pk }}"
                                    data-payload-title="{{ row.obj.model_name }} #{{ row.obj.object_pk }}"
                                    title="{% translate 'Show payload' %}"
                                    aria-label="{% translate 'Show payload' %}">
                                <i class="fas fa-eye" aria-hidden="true"></i>
                            </button>
                            <div id="payload-src-{{ row.obj.pk }}" class="d-none">
                                {% if row.diff.kind == "diff" %}
                                    {# Plain div grid on purpose: a nested table element #}
                                    {# leaks into the outer DataTable's column count and #}
                                    {# triggers its "Incorrect column count" error. #}
                                    <div class="border rounded mb-0 small">
                                        <div class="row g-0 fw-semibold">
                                            <div class="col-4 px-2 py-1 border-end">{% translate "Field" %}</div>
                                            <div class="col-4 px-2 py-1 border-end">{% translate "Before" %}</div>
                                            <div class="col-4 px-2 py-1">{% translate "After" %}</div>
                                        </div>
                                        {% for field, change in row.diff.changed.items %}
                                            <div class="row g-0 border-top">
                                                <div class="col-4 px-2 py-1 border-end"><code>{{ field }}</code></div>
                                                <div class="col-4 px-2 py-1 border-end">{{ change.before }}</div>
                                                <div class="col-4 px-2 py-1">{{ change.after }}</div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% elif row.diff.kind == "snapshot" %}
                                    <pre class="mb-0 small">{{ row.diff.json }}</pre>
                                {% else %}
                                    <span class="text-muted small">{% translate "row deleted (no snapshot)" %}</span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            <i class="fas fa-search me-1"></i>
                            {% translate "No config changes to display." %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "aa_discord_audit/_payload_modal.html" %}

    {% if not client_mode and page_obj %}
        <p class="text-muted small">
            {% translate "Showing the first page — narrow your filters to search across all results." %}
        </p>
        {% include "aa_discord_audit/_pagination.html" with page_obj=page_obj pagination_query=pagination_query only %}
    {% endif %}
{% endblock %}