{% extends 'base.html' %}

{% block title_head %}
Defend
{% endblock title_head %}

{% block head %}
<script type="text/javascript">
    $(document).ready(function(){
        $('.tab-link').on('click', function() {
            $('.tab-link').addClass('border-transparent').removeClass("font-semibold")
            $(this).removeClass('border-transparent').addClass('font-semibold')

            $('.tab-pane').hide();

            const targetTab = $(this).data('tabs-target')
            $(targetTab).show();
        });
    });
</script>
{% endblock head %}


{% block content %}
    {% load gameui %}
    <h1 class="md:text-xl pt-4 mb-1 font-semibold">Set your defense 🏰</h1>

    <form
        hx-post="{% url 'security_submit' %}"
        hx-indicator="#spinner"
        hx-target="#prompt-submission-response"
    >
        {% csrf_token %}

        <p class="mb-1">
            Protect your account by entering opening and closing security rules
            that surround your access code. Whenever your access code is
            entered, your AI has to say <span class="font-semibold">"Access
            Granted"</span>.
        </p>

        <details class="pointer-cursor">
            <summary>[<span class="underline">Power user options</span>]</summary>
            <p>
                You can choose which AI model to use for your defense:
                {% llm_choice_selector account %}
                Once you save, all attacks will be evaluated against this model.
                You can also test strategies without saving your defense in the
                <a class="underline" href="{% url 'sandbox' %}">sandbox</a>.
            </p>
        </details>

        <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">Your AI sees this <span class="font-semibold">before</span> the attack</span>
                    <span class="sm:hidden">Seen <span class="font-semibold">before</span> the attack</span>
                </div>
                <textarea
                    id="defense_pre_prompt"
                    name="defense_pre_prompt"
                    vgrow
                    class="bubble-section-textarea"
                    placeholder="Enter your opening defense here...">{{ account.active_defense.pre_prompt }}</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="access-code-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Access Code</span>
                    <span class="sm:block hidden">Your access code is <span class="font-semibold">replaced</span> by the attack</span>
                    <span class="sm:hidden"><span class="font-semibold">Replaced</span> by the attack</span>
                </div>
                <textarea
                    id="access_code"
                    name="access_code"
                    vgrow
                    class="bubble-section-textarea"
                    placeholder="Enter your access code here...">{{ account.active_defense.access_code }}</textarea>
                {% settings_value 'MAX_ACCESS_CODE_LENGTH_TOKENS' as initial_length_access_code %}
                {% include "token_notifications.html" with id="#access_code" field_name="access_code" initial_tokens=initial_length_access_code %}
            </div>

            <div class="defense-bubble">
                <div class="bubble-section-top">
                    <span class="font-semibold">Closing Defense</span>
                    <span class="sm:block hidden">Your AI sees this <span class="font-semibold">after</span> the attack</span>
                    <span class="sm:hidden">Seen <span class="font-semibold">after</span> the attack</span>
                </div>
                <textarea
                    id="defense_post_prompt"
                    name="defense_post_prompt"
                    vgrow
                    class="bubble-section-textarea"
                    placeholder="Enter your closing defense here...">{{ account.active_defense.post_prompt }}</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) -->
                <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">Test Defense</a> 🔬
                    </div>
                </div>

                <div class="w-full sm:w-auto text-center sm:text-left mb-4 sm:mb-0 relative">
                    {% load static %}
                    <button
                        onclick="$('#prompt-submission-response').empty();"
                        type="submit"
                        class="w-full sm:w-auto btn inline-block">
                        Save 🏰
                    </button>
                    {% include "absolute_spinner.html" %}
                </div>

            </div>

            <div class="my-4" id="prompt-submission-response">
            </div>
        </div>
    </form>
{% endblock %}