{% extends 'base.html' %}
{% load humanize %}
{% load gameui %}
{% block title_head %}
Attack sandbox
{% endblock title_head %}
{% block content %}
    <h1 class="md:text-xl pt-4 mb-1 font-semibold">Attack sandbox 🛝</h1>
    <form hx-ext="post-streaming"
          hx-post-streaming="{% url 'sandbox_submit' %}"
          hx-target="#llm-response-area">
        {% csrf_token %}

        <p>
            You can use this page to try out attacks and defenses.  It will not
            change your balance. Defenses and attacks submitted on this page will
            show up under &ldquo;Test attacks&rdquo; on the
            <a class="underline" href="{% url 'overview' %}">home page</a>.
            You are currently using this AI model:
            {% llm_choice_selector account %}
        </p>

        <div class="max-w-full">
            <div class="defense-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Opening Defense</span>
                </div>
                <textarea
                    id="defense_pre_prompt"
                    name="defense_pre_prompt"
                    vgrow
                    class="bubble-section-textarea"
                    placeholder="Enter your opening defense here..."></textarea>
                {% settings_value 'MAX_DEFENSE_PRE_PROMPT_LENGTH_TOKENS' as initial_length_pre_prompt %}
                {% include "token_notifications.html" with id="#defense_pre_prompt" field_name="defense_pre_prompt" initial_tokens=initial_length_pre_prompt %}
            </div>
            <div class="attack-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Attack</span>
                </div>
                <textarea
                    id="attacker_input"
                    name="attacker_input"
                    vgrow
                    class="bubble-section-textarea disable-when-in-progress"
                    placeholder="Enter an attack here..."></textarea>
                {% 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 %}
            </div>
            <div class="defense-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Closing Defense</span>
                </div>
                <textarea
                    id="defense_post_prompt"
                    name="defense_post_prompt"
                    vgrow
                    class="bubble-section-textarea"
                    placeholder="Enter a closing defense here..."></textarea>
                {% settings_value 'MAX_DEFENSE_POST_PROMPT_LENGTH_TOKENS' as initial_length_post_prompt %}
                {% include "token_notifications.html" with id="#defense_post_prompt" field_name="defense_post_prompt" initial_tokens=initial_length_post_prompt %}
            </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">
                    <div class="w-full sm:w-auto text-center sm:text-left mr-4">
                        <a href="{% url 'subaccount_login' account_id=account.account_id %}" class="font-semibold underline">Go Back</a> ↩️
                    </div>
                </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
                        type="submit"
                        class="w-full sm:w-auto btn inline-block">
                        Attack ⚔️
                    </button>
                    {% include "absolute_spinner.html" %}
                </div>
            </div>
            <div id="llm-response-area">
            </div>
        </div>
    </form>
{% endblock %}