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

{% block page_title %}
    {% translate "Discord Audit Run" %} #{{ run.pk }}
{% endblock %}

{% block extra_javascript %}
    {% include "aa_discord_audit/_datatables_init.html" %}
    {% if not is_finished %}
        <script src="{% static 'aa_discord_audit/js/run_state_poll.js' %}" defer></script>
    {% endif %}
    <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">
                {% blocktranslate with run_id=run.pk %}Run #{{ run_id }}{% endblocktranslate %}
            </li>
        </ol>
    </nav>

    {# The wrapper keeps id + data-poll-* so run_state_poll.js can scope #}
    {# its data-poll-field lookups; the card chrome is dropped to match #}
    {# the bare-table convention used across the audit views. #}
    <div id="run-state-card"
         class="mb-4"
         data-poll-url="{% url 'aa_discord_audit:run_state_json' pk=run.pk %}"
         data-poll-interval="5000"
         data-terminal-states="{{ terminal_states_csv }}">
        <div class="d-flex align-items-center gap-2 mb-3">
            <h5 class="mb-0">{% translate "AuditRun" %} #{{ run.pk }}</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered w-auto">
                <tbody>
                    <tr>
                        <th scope="row">{% translate "State" %}</th>
                        <td>
                            <span class="badge {{ meta.state_badge.css }}">{{ meta.state_badge.label }}</span>
                            {% if not is_finished %}
                                <span class="spinner-border spinner-border-sm ms-1 align-middle" role="status">
                                    <span class="visually-hidden">{% translate "running" %}</span>
                                </span>
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Triggered by" %}</th>
                        <td>{{ run.triggered_by }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Triggered by user" %}</th>
                        <td>{{ run.triggered_by_user|default:"&mdash;" }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Started" %}</th>
                        <td>{{ run.started_at|date:"Y-m-d H:i:s" }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Finished" %}</th>
                        <td>
                            {% if run.finished_at %}
                                {{ run.finished_at|date:"Y-m-d H:i:s" }}
                            {% else %}
                                &mdash;
                            {% endif %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Members scanned" %}</th>
                        <td data-poll-field="members_scanned">{{ run.members_scanned }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Findings" %}</th>
                        <td data-poll-field="findings_count">{{ run.findings_count }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Actions applied" %}</th>
                        <td data-poll-field="actions_applied">{{ run.actions_applied }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Actions skipped" %}</th>
                        <td data-poll-field="actions_skipped">{{ run.actions_skipped }}</td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Dry run" %}</th>
                        <td>
                            {% include "aa_discord_audit/_flag_badge.html" with badge=meta.dry_run_badge only %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "First-run lock" %}</th>
                        <td>
                            {% include "aa_discord_audit/_flag_badge.html" with badge=meta.lock_badge only %}
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">{% translate "Confirmation bypassed" %}</th>
                        <td>
                            {% include "aa_discord_audit/_flag_badge.html" with badge=meta.bypass_badge only %}
                        </td>
                    </tr>
                    {% if meta.error_redacted %}
                        <tr>
                            <th scope="row">{% translate "Error" %}</th>
                            <td>
                                <pre class="mb-0">{{ meta.error_redacted }}</pre>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <div class="d-flex align-items-center gap-2 mb-3">
        <h5 class="mb-0">{% translate "Findings" %}</h5>
        {% if can_view_findings %}
            <a href="{% url 'aa_discord_audit:findings_csv' pk=run.pk %}" class="btn btn-outline-secondary btn-sm ms-2">
                {% translate "Download all findings (CSV)" %}
            </a>
        {% endif %}
    </div>

    {% if not can_view_findings %}
        <div class="alert alert-warning">
            {% translate "You lack the view_auditfinding permission; per-finding details are hidden." %}
        </div>
    {% else %}
        <p class="text-muted small mb-2">
            {% blocktranslate with t=findings_summary.total k=findings_summary.kicked s=findings_summary.skipped e=findings_summary.errors %}{{ t }} findings: {{ k }} kicked, {{ s }} skipped, {{ e }} errors{% endblocktranslate %}
        </p>

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

            <label class="form-label mb-0">{% translate "Category" %}</label>
            <select name="category" class="form-select w-auto">
                <option value="">{% translate "(any)" %}</option>
                {% for c in categories %}
                    <option value="{{ c.value }}"{% if c.value == selected_filters.category %} selected{% endif %}>{{ c.label }}</option>
                {% endfor %}
            </select>

            <label class="form-label mb-0">{% translate "State" %}</label>
            <select name="state" class="form-select w-auto">
                <option value="">{% translate "(any)" %}</option>
                {% for s in finding_states %}
                    <option value="{{ s.value }}"{% if s.value == selected_filters.state %} selected{% endif %}>{{ s.label }}</option>
                {% endfor %}
            </select>

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

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

        <div class="table-responsive">
            {# {% if finding_rows %}: skip DataTables when empty so #}
            {# the {% empty %} <td colspan> placeholder does not trip #}
            {# the "Incorrect column count" warning (tn/18). #}
            <table class="table table-striped"{% if finding_rows %} data-audit-table{% endif %} data-order='[[2, "asc"]]' data-paging="false">
                <thead>
                    <tr>
                        <th scope="col">{% translate "Member ID" %}</th>
                        <th scope="col">{% translate "Username" %}</th>
                        <th scope="col">{% translate "Category" %}</th>
                        <th scope="col">{% translate "State" %}</th>
                        <th scope="col">{% translate "Action" %}</th>
                        <th scope="col">{% translate "Kicked" %}</th>
                        <th scope="col">{% translate "Skip reason" %}</th>
                        <th scope="col">{% translate "Error" %}</th>
                        <th scope="col"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in finding_rows %}
                        <tr>
                            <td>{{ row.obj.member_id }}</td>
                            <td>{{ row.obj.member_username }}</td>
                            <td>
                                <span class="badge {{ row.category_badge.css }}">{{ row.category_badge.label }}</span>
                            </td>
                            <td>
                                <span class="badge {{ row.state_badge.css }}">{{ row.state_badge.label }}</span>
                            </td>
                            <td>
                                <span class="badge {{ row.action_badge.css }}">{{ row.action_badge.label }}</span>
                            </td>
                            <td>
                                {% include "aa_discord_audit/_flag_badge.html" with badge=row.kicked_badge only %}
                            </td>
                            <td>{{ row.obj.skipped_reason|default:"&mdash;" }}</td>
                            <td>
                                {% if row.error_redacted %}
                                    {# Icon trigger opens the shared #payload-modal; the full #}
                                    {# (untruncated) error lives in the hidden source div and #}
                                    {# is cloned into the modal by payload_modal.js. #}
                                    <button type="button"
                                            class="btn btn-outline-primary btn-sm"
                                            data-bs-toggle="modal"
                                            data-bs-target="#payload-modal"
                                            data-payload-source="#payload-src-{{ row.obj.pk }}"
                                            data-payload-title="{% blocktranslate with member=row.obj.member_username %}Error · {{ member }}{% endblocktranslate %}"
                                            title="{% translate 'Show error detail' %}"
                                            aria-label="{% translate 'Show error detail' %}">
                                        <i class="fas fa-eye" aria-hidden="true"></i>
                                    </button>
                                    <div id="payload-src-{{ row.obj.pk }}" class="d-none">
                                        <pre class="mb-0 small">{{ row.error_redacted }}</pre>
                                    </div>
                                {% else %}
                                    &mdash;
                                {% endif %}
                            </td>
                            <td>
                                {# Icon-only link to the per-finding explanation page; the #}
                                {# visible label is dropped, so the action name lives in #}
                                {# title / aria-label for a11y + hover. #}
                                <a href="{% url 'aa_discord_audit:finding_explain' pk=row.obj.pk %}"
                                   class="btn btn-outline-primary btn-sm"
                                   title="{% translate 'Explain' %}"
                                   aria-label="{% translate 'Explain' %}">
                                    <i class="fas fa-magnifying-glass" aria-hidden="true"></i>
                                </a>
                            </td>
                        </tr>
                    {% empty %}
                        <tr>
                            <td colspan="9" class="text-center text-muted py-4">
                                <i class="fas fa-search me-1"></i>
                                {% translate "No findings to display." %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {% include "aa_discord_audit/_pagination.html" with page_obj=page_obj pagination_query=selected_filters only %}
        {% include "aa_discord_audit/_payload_modal.html" %}
    {% endif %}
{% endblock %}