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

{% block page_title %}
    {% translate "Discord Audit Runs" %}
{% endblock %}

{% block header_nav_collapse_right %}
    {% include "aa_discord_audit/_top_actions.html" %}
{% endblock %}

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

{% block content %}
    {% if perms.aa_discord_audit.run_audit %}
        {% comment %}
        The launch trigger lives in the top navbar (_top_actions.html);
        the modal markup it opens stays in the page body so it is present
        in the DOM with its policy-summary context.
        {% endcomment %}
        {% include "aa_discord_audit/_launch_modal.html" %}
    {% endif %}

    <div class="card mb-3">
        <div class="card-body">
            <div class="d-flex gap-4 flex-wrap">
                <div>
                    <div class="text-muted small">{% translate "Last run" %}</div>
                    {% if summary.last_run %}
                        {# Flex row so the badge and timestamp sit on one line with a controlled gap. Flex blockifies its items, which trims the leading/trailing whitespace the _badge.html include emits inside <a>, and discards the newline between the flex items — neither shows as a stray gap. #}
                        <div class="d-flex align-items-center gap-1">
                            <a href="{% url 'aa_discord_audit:run_detail' pk=summary.last_run.pk %}">{% include "aa_discord_audit/_badge.html" with badge=summary.last_run_badge only %}</a>
                            <span class="text-muted small">{{ summary.last_run_rel }}</span>
                        </div>
                    {% else %}
                        <span class="text-muted">{% translate "no runs yet" %}</span>
                    {% endif %}
                </div>
                <div>
                    <div class="text-muted small">{% translate "Failed (7 d)" %}</div>
                    <span class="fw-semibold">{{ summary.failed_recent }}</span>
                </div>
                <div>
                    <div class="text-muted small">{% translate "Pending findings" %}</div>
                    <span class="fw-semibold">{{ summary.pending_findings }}</span>
                </div>
            </div>
        </div>
    </div>

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

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

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

        <label for="from-date" class="form-label mb-0">{% translate "From" %}</label>
        <input id="from-date" type="date" name="from" value="{{ selected_from }}" class="form-control w-auto">

        <label for="to-date" class="form-label mb-0">{% translate "To" %}</label>
        <input id="to-date" type="date" name="to" value="{{ selected_to }}" class="form-control w-auto">

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

    <div class="table-responsive">
        {# {% if rows %}: skip DataTables on an empty list so the #}
        {# {% empty %} <td colspan> placeholder does not trip the #}
        {# "Incorrect column count" warning (tn/18). The live-poll #}
        {# attrs stay put — the poller keys off data-active-runs. #}
        <table class="table table-striped"
               {% if rows %}data-audit-table{% endif %}
               data-active-runs
               data-poll-url="{% url 'aa_discord_audit:runs_state_json' %}"
               data-poll-interval="10000"
               data-terminal-states="{{ terminal_states_csv }}"
               data-order='[[2, "desc"]]'
               data-paging="{{ client_mode|yesno:'true,false' }}">
            <thead>
                <tr>
                    <th scope="col">{% translate "ID" %}</th>
                    <th scope="col">{% translate "State" %}</th>
                    <th scope="col">{% translate "Started" %}</th>
                    <th scope="col">{% translate "Duration" %}</th>
                    <th scope="col">{% translate "Trigger" %}</th>
                    <th scope="col">{% translate "User" %}</th>
                    <th scope="col" class="text-end">{% translate "Members" %}</th>
                    <th scope="col" class="text-end">{% translate "Findings" %}</th>
                    <th scope="col" class="text-end">{% translate "Applied" %}</th>
                    <th scope="col" class="text-end">{% translate "Skipped" %}</th>
                    <th scope="col">{% translate "Dry run" %}</th>
                    <th scope="col">{% translate "Error" %}</th>
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                    <tr data-row-pk="{{ row.obj.pk }}" data-row-state="{{ row.obj.state }}">
                        <td>{{ row.obj.pk }}</td>
                        {# Icon-only state badge: the verbose enum label would widen #}
                        {# the column and force a horizontal scrollbar, so it moves to #}
                        {# the hover title; data-order keeps the column sortable. #}
                        <td data-order="{{ row.state_badge.title|default:row.state_badge.label }}">
                            {% include "aa_discord_audit/_badge.html" with badge=row.state_badge icon_only=True only %}
                        </td>
                        <td title="{{ row.started_abs }}" data-order="{{ row.obj.started_at|date:'U' }}">{{ row.started_rel }}</td>
                        <td>{{ row.duration }}</td>
                        <td>
                            {% include "aa_discord_audit/_badge.html" with badge=row.trigger_badge only %}
                        </td>
                        <td>{{ row.obj.triggered_by_user|default:"—" }}</td>
                        <td class="text-end">{{ row.obj.members_scanned }}</td>
                        <td class="text-end">{{ row.obj.findings_count }}</td>
                        <td class="text-end">{{ row.obj.actions_applied }}</td>
                        <td class="text-end">{{ row.obj.actions_skipped }}</td>
                        <td>
                            {% include "aa_discord_audit/_flag_badge.html" with badge=row.dry_run_badge only %}
                        </td>
                        <td>
                            {% if row.error_redacted %}
                                {# Icon trigger opens the shared #payload-modal; the full #}
                                {# (untruncated) run 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 id=row.obj.pk %}Run #{{ id }} error{% 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 run detail page; the visible label #}
                            {# is dropped, so the action name lives in title / aria-label. #}
                            <a href="{% url 'aa_discord_audit:run_detail' pk=row.obj.pk %}"
                               class="btn btn-outline-primary btn-sm"
                               title="{% translate 'Open' %}"
                               aria-label="{% translate 'Open' %}">
                                <i class="fas fa-arrow-right" aria-hidden="true"></i>
                            </a>
                        </td>
                    </tr>
                {% empty %}
                    <tr>
                        <td colspan="13" class="text-center text-muted py-4">
                            <i class="fas fa-search me-1"></i>
                            {% translate "No audit runs to display." %}
                            <a href="{% url 'aa_discord_audit:run_list' %}" class="ms-2">{% translate "Clear filters" %}</a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not client_mode and page_obj and page_obj.number == 1 %}
        <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 %}

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