{% extends 'base.html' %}

{% block content %}
  <h1 class="md:text-xl pt-4 mb-1 font-semibold">Attack {{tutorial_account.account_name}}</h1>
  <p>
    Attack a player by inputting their password or tricking their AI into saying <span class="font-semibold">"Access Granted"</span>. {{tutorial_account.hint}} <a class="underline" href="{% url 'attack_guide' %}" target="_blank">
      [Tips]
  </a>
  </p>

  {% load gameui %}
  <form id="attack-form"
  data-persist="garlic"
  hx-ext="post-streaming"
  hx-post-streaming="{% url 'tutorial_submit' step=step %}"
  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>
              {% 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>
                <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">
                <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>
            </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 content %}