{% extends 'base.html' %}
{% load humanize %}

{% block title_head %}
Attack {{ subaccount.account_name }}
{% endblock title_head %}

{% block head %}
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-selector').change(function() {
            var selectedValue = $(this).val();
            $('#attacker_input').val(selectedValue);
        });
    });
</script>
{% endblock %}

{% block content %}
    {% load gameui %}

    {% if not can_attack %}
        <div class="bg-blue-50 border-blue-200 mt-4 mb-2 p-2 border-2">
            <p>{{ denial_message }}</p>
        </div>
    {% endif %}

    {% if subaccount.account_id == account.account_id %}
        <h1 class="md:text-xl pt-4 mb-1 font-semibold">Test your defense 🔬</h1>
    {% else %}
        <h1 class="md:text-xl pt-4 mb-1 font-semibold">Attack {{ subaccount.account_name }}</h1>
    {% endif %}

    <p>
        Attack a player by tricking their AI into saying <span
        class="font-semibold">"Access Granted"</span>. You can try clever
        attacks like impersonating them, overriding their security, or
        requesting their AI to write a story.
        <a class="underline" href="{% url 'attack_guide' %}" target="_blank">
            [Tips]
        </a>
    </p>

    {% if subaccount.account_id == account.account_id %}
        <p class="pt-2">
            If you want to test new defenses and attacks without saving
            anything, you can also try the <a class="underline"
            href="{% url 'sandbox' %}">sandbox</a>.
        </p>
    {% endif %}

    {% if restriction_message %}
        <div class="warning-container">
            ❗️ <span class="font-medium">This account has a lower rank, so it is subject to an input restriction:</span> {{ restriction_message }}
        </div>
    {% endif %}

    <div class="p-2 mt-4 mb-6 bg-white rounded shadow-sm text-sm">
        <div class="flex flex-col md:flex-row justify-between items-stretch px-4">
            <div class="flex flex-col justify-center md:border-r md:border-gray-300 pr-4 mb-2 md:mb-0 flex-1">
                {% tier subaccount.balance as tier %}
                <div>
                    <span class="font-semibold">Tier:</span>
                    <span>{{ tier.title }} {{ tier.emoji }}</span>
                </div>
                <div>
                    <span class="font-semibold">Birthday:</span>
                    <span>{{ join_date }}</span>
                </div>
                <div>
                    <span class="font-semibold">Balance:</span>
                    <span>${{ subaccount.balance }}</span>
                </div>
            </div>


            <div class="flex-grow flex flex-col justify-center md:pl-4 flex-1">
                <div>
                    <span class="font-semibold text-red-500">Successful Attacks:</span>
                    <span>{{ successful_attack_attempts }} &frasl; {{ total_attacks }}</span>
                    <span>({{ attack_success_probability|floatformat:1 }}%)</span>
                </div>
                <div>
                    <span class="font-semibold text-green-600">Successful Defends:</span>
                    <span>{{ successful_defend_attempts }} &frasl; {{ total_defends }}</span>
                    <span>({{ defend_success_probability|floatformat:1 }}%)</span>
                </div>
                <div>
                    <span class="font-semibold text-blue-600">Last Break-In:</span>
                    {% if last_break_in %}
                        <span>{{ last_break_in|naturaltime }}</span>
                    {% else %}
                        <span>Not yet!</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% load gameui %}

    <form id="attack-form"
          data-persist="garlic"
          hx-ext="post-streaming"
          hx-post-streaming="{% url 'subaccount_login_submit' account_id=subaccount.account_id %}"
          hx-target="#llm-response-area"
          hx-on:attack-success-other="disableForm(this)">
        {% csrf_token %}    
        <div class="max-w-full">
            <div class="defense-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Opening Defense</span>
                    <span class="hidden sm:block">Their AI sees this <span class="font-semibold">before</span> your attack</span>
                    <span class="sm:hidden">Seen <span class="font-semibold">before</span> your attack</span>
                </div>
                <div class="bubble-section-output-hidden-line">
                    {% lorem 50 w %}
                </div>
            </div>

            <div class="attack-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Attack</span>
                    <span class="sm:block hidden">Your attack <span class="font-semibold">replaces</span> their access code</span>
                    <span class="sm:hidden"><span class="font-semibold">Replaces</span> their access code</span>
                </div>
                <textarea
                    id="attacker_input"
                    name="attacker_input"
                    vgrow
                    class="bubble-section-textarea disable-when-in-progress"
                    placeholder="Enter your attack here..."></textarea>
                {% if can_attack %}
                    {% settings_value 'MAX_ATTACK_LENGTH_TOKENS' as initial_length %}
                    {% include "token_notifications.html" with id="#attacker_input" field_name="attacker_input" initial_tokens=initial_length %}
                {% endif %}
            </div>

            <div class="defense-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Closing Defense</span>
                    <span class="sm:block hidden">Their AI sees this <span class="font-semibold">after</span> your attack</span>
                    <span class="sm:hidden">Seen <span class="font-semibold">after</span> your attack</span>
                </div>
                <div class="bubble-section-output-hidden-line">
                    {% lorem 50 w %}
                </div>
            </div>

            <div class="flex flex-col-reverse sm:flex-row justify-center items-center mt-6 w-full">
                <!-- Second button (on the left/bottom) -->
                <div class="w-full sm:w-auto text-center sm:text-left mb-0">
                    {% if subaccount.account_id == account.account_id %}
                        <div class="w-full sm:w-auto text-center sm:text-left mr-4">
                            <a href="{% url 'security' %}" class="font-semibold underline">Go Back</a> ↩️
                        </div>
                    {% else %}
                        <div class="w-full sm:w-auto text-center sm:text-left mr-4">
                            <a href="{% url 'subaccounts' %}" class="font-semibold underline">Go Back</a> ↩️
                        </div>
                    {% endif %}
                </div>

                <!-- First button (on the right/top) -->
                <div class="w-full sm:w-auto text-center sm:text-left mb-4 sm:mb-0 relative disable-when-in-progress">
                    <button {% if not can_attack %}disabled{% endif %} 
                        type="submit" 
                        class="w-full sm:w-auto btn inline-block {% if not can_attack %}disabled:opacity-25{% endif %}">
                        Attack ⚔️
                    </button>
                    {% include "absolute_spinner.html" %}
                </div>
            </div>

            <div id="llm-response-area">
            </div>
        </div>      
    </form>    
{% endblock %}
