{# Table for showing AuthAttempts with a variable set of columns #}
{% load humanize %}
{% load gameui %}
{% load shortnaturaltime %}
<div class="flex flex-col border bg-white border-gray-200 rounded-sm shadow-sm text-sm auth-attempt-inner-table">
    <!-- Header -->
    <div class="flex justify-between bg-gray-800 text-white pl-0 pr-1 pt-1 pb-1 rounded-t-sm">
        <div class="w-8 shrink-0"></div>
        <div class="w-16 sm:w-20 shrink-0">When</div>
        <div class="flex-grow shrink truncate">
            {% if view_as_defender %}
                Attacker
            {% elif view_as_attacker %}
                Defender
            {% else %}
                {# Empty column just to sponge up space in self-attack table #}
            {% endif %}
        </div>
        <div class="w-16 sm:w-24 shrink-0 text-center">Won</div>
        {% if not view_as_self %}
            <div class="w-24 sm:w-32 shrink-0 text-center">Gain</div>
        {% endif %}
    </div>

    <!-- Row -->
    {% for auth_attempt in auth_attempts %}
        <details class="flex flex-col border-t border-gray-200 cursor-pointer">
            <summary class="flex w-full items-center pl-0 pr-1 pt-1 pb-1">
                <!-- Drop-down arrow, animated in CSS (initially appears pointed right, then rotates to down) -->
                <div class="w-8 shrink-0 text-gray-600 flex items-center justify-center rotate-arrow">
                    ▼
                </div>
                <div class="w-16 sm:w-20 shrink-0">{{ auth_attempt.timestamp|shortnaturaltime }} ago</div>
                <div class="flex-grow shrink truncate">
                    {% if view_as_defender %}
                        {% pretty_account_link my_account=my_account target_account=auth_attempt.attacking_account %}
                    {% elif view_as_attacker %}
                        {% pretty_account_link my_account=my_account target_account=auth_attempt.defending_account %}
                    {% elif view_as_self %}
                        {# Also empty (sponge up space) #}
                    {% endif %}
                </div>
                <div class="w-16 sm:w-24 shrink-0 text-center">
                    {{ auth_attempt.was_successful|yesno:"Yes,No" }}
                </div>
                {% if not view_as_self %}
                    <div class="w-24 sm:w-32 shrink-0 text-center">
                        {% include "pretty_money_delta.html" with money_delta=auth_attempt.net_transfer_amount %}
                    </div>
                {% endif %}
            </summary>
            <div class="w-full py-2 px-4 bg-gray-100 shadow-sm-inner">
                <table class="w-full">
                    <tbody>
                        {% if view_as_defender or view_as_self %}
                            <tr class="border border-gray-200 text-sm">
                                <th class="font-semibold p-2">Opening defense</th>
                                <td class="verbatim p-2">{% include "text_or_empty.html" with text=auth_attempt.defense_pre_prompt %}</td>
                            </tr>
                            <tr class="border border-gray-200 text-sm">
                                <th class="font-semibold p-2">Access code</th>
                                <td class="verbatim p-2">{% include "text_or_empty.html" with text=auth_attempt.access_code %}</td>
                            </tr>
                            <tr class="border border-gray-200 text-sm">
                                <th class="font-semibold p-2">Closing defense</th>
                                <td class="verbatim p-2">{% include "text_or_empty.html" with text=auth_attempt.defense_post_prompt %}</td>
                            </tr>
                        {% endif %}
                        <tr class="border border-gray-200 text-sm">
                            <th class="font-semibold p-2">Attack</th>
                            <td class="verbatim p-2">{% include "text_or_empty.html" with text=auth_attempt.attacker_input %}</td>
                        </tr>
                        <tr class="border border-gray-200 text-sm">
                            <th class="font-semibold p-2">AI output</th>
                            <td class="verbatim p-2">{% include "text_or_empty.html" with text=auth_attempt.llm_output %}</td>
                        </tr>
                        {% if not view_as_self %}
                            <tr class="border-0 text-center text-sm">
                                <td class="p-2" colspan="2">
                                    <button class="btn bg-red-600 hover:bg-red-300 report-btn"
                                            data-authattempt-id="{{ auth_attempt.pk }}">
                                        ⚠️ Report inappropriate use
                                    </button>
                                </td>
                            </tr>
                        {% endif %}
                    </tbody>
                </table>
            </div>
        </details>
    {% empty %}
        <div class="flex flex-col border-t border-gray-200 cursor-pointer w-full p-1 text-center">
            No attacks to show.
        </div>
    {% endfor %}
</div>