{% extends 'base.html' %}

{% block title_head %}
Account
{% endblock title_head %}

{% block head %}
{% load static %}
<script type="text/javascript">
    $(document).ready(function(){
        $(".report-btn").click(function() {
            var btn = $(this);
            $.ajax({
                url: "{% url 'create_flag' %}",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    'authattempt_id': btn.data("authattempt-id")
                
                }),
                beforeSend: function(xhr) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function() {
                    btn.removeClass("hover:bg-red-300").text("Reported");
                },
                error: function() {
                    btn.removeClass("hover:bg-red-300").text("Failed");
                }
            });
            btn.prop("disabled", true);
        });

        $('#login-link').one('click', function() {
            var login_str = '<a class="underline" href="{{ login_url }}">{{ login_url }}</a>';
            var copy_str = '<i id="copy-button" class="fa-regular ml-3 fa-copy fa-xl opacity-60 hover:opacity-100 cursor-pointer" alt="Copy to clipboard"></i>';
            $(this).html(login_str + copy_str);
            $('#copy-button').on('click', function() {
                navigator.clipboard.writeText($('#login-link').text());
            });
        });
        
        $('.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 %}

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

    <div class="bg-sky-200 rounded-r-xl rounded-l-xl mb-6 p-3 mt-6">
        <div class="md:flex pb-3">
            <div class="md:w-1/3 bg-sky-100 rounded-r-xl rounded-l-xl p-3">
                <p class="font-semibold">{{ account.account_name }}</p>
                <p><span class="font-semibold">Balance:</span> $<span sse-swap="new_balance">{{ account.balance }} 💰</span></p>
                <p><span class="font-semibold">Tier:</span> {% tier account.balance "title" %} {% tier account.balance "emoji" %}</p>
                <p>
                    <span class="font-semibold">Status:</span> 
                    <span sse-swap="lock_state_changed">
                        {% if account.locked %}
                            Locked 🔒 
                        {% else %}
                            Unlocked 🟢
                        {% endif %}
                    </span>
                </p>
            </div>

            <div class="md:w-2/3 bg-sky-100 rounded-r-xl rounded-l-xl flex flex-col justify-center p-3 md:ml-3 mt-3 md:mt-0">
                <div>
                    Log in on a different browser:
                </div>
                <div class="mt-2">
                    <span id="login-link" class="font-mono block text-sm bg-gray-100 py-2 px-4 rounded border border-gray-300 break-all flex items-center justify-between">🌐 Click to Show Login Link</span>
                </div>
            </div>        
        </div>
        
        <div class="bg-sky-100 rounded-r-xl rounded-l-xl flex flex-wrap text-center justify-center">
            {% settings_value 'TIERS' as tiers %}
            {% for tier in tiers %}
            <div class="flex items-center text-xs md:text-base">
                {% tier account.balance as account_tier %}
                <div class="p-2 flex items-center {% if account_tier == tier %}bg-yellow-100{% endif %}">
                    <div>
                        <div class="md:inline-block font-bold">{{ tier.title }}</div>
                        <div class="md:inline-block">{{ tier.emoji }}</div>
                        <div class="block">{{ tier.description }}</div>
                    </div>
                </div>
                {% if not forloop.last %}
                    <div class="md:inline-block mx-2 md:mx-6 text-xs md:text-2xl flex items-center"></div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>

    <h1 class="md:text-xl mb-1 font-semibold">Recent heists 💼</h1>
    <div class="mb-6 text-sm">
        {% settings_value "THEFT_WORDS" as theft_words %}
        {% for auth_attempt in recent_auth_attempts %}
            {% random_choice theft_words as theft_word %}
            {% if forloop.counter <= max_recent_auth_attempts_mobile and not forloop.first %}
                <hr class="md:hidden m-1"/>
            {% endif %}
            {% comment %} On mobile, show a smaller number of items. {% endcomment %}
            <div class="flex justify-between items-center {% if forloop.counter > max_recent_auth_attempts_mobile %}hidden md:flex{% endif %}">
                <div>
                    <span class="text-red-500"><a class="underline" href="{% url 'subaccount_login' auth_attempt.attacking_account.account_id %}">{{ auth_attempt.attacking_account.account_name }}</a></span>
                    {{ theft_word }}
                    <span class="text-green-600 font-mono">${{ auth_attempt.defending_transfer_amount }}</span>
                    from
                    <span class="text-blue-500"><a class="underline" href="{% url 'subaccount_login' auth_attempt.defending_account.account_id %}">{{ auth_attempt.defending_account.account_name }}</a></span>
                </div>
                <span class="text-gray-500 sm:block hidden">{{ auth_attempt.timestamp|naturaltime }}</span>
            </div>
        {% empty %}
            <div class="text-gray-500">No recent heists</div>
        {% endfor %}
        <hr class="mt-1" />
        <div class="flex flex-col md:flex-row justify-between mt-1 space-y-2 md:space-y-0 md:space-x-4">
            <p class="text-left text-xs">
                <span class="font-semibold">Top Weekly Heists:</span>
                {% for auth_attempt in top_auth_attempts %}
                    <span class="text-blue-500">{{ auth_attempt.attacking_account.account_name }}</span> <span class="text-green-600">(<span class="font-mono">${{ auth_attempt.defending_transfer_amount|abbreviate }}</span>)</span>{% if not forloop.last %},{% endif %}
                {% empty %}
                    <span class="text-gray-500">No top heists</span>
                {% endfor %}
            </p>
            <p class="text-left text-xs"><span class="font-semibold">Total Heists:</span> {{ num_total_auth_attempts|intcomma }}</p>
        </div>           
    </div>
    
    <div id="tabs">
        <div class="mb-2 flex justify-center">
            <ul class="flex flex-nowrap whitespace-nowrap -mb-px">
              <li class="mr-4">
                <button
                    class="tab-link inline-block text-sm sm:text-base border-b-2 font-semibold rounded-t-lg hover:border-gray-300"
                    data-tabs-target="#attacks-on-you"
                    type="button">Attacks on You</button>
              </li>
              <li class="mr-4">
                <button
                    class="tab-link inline-block text-sm sm:text-base border-b-2 border-transparent rounded-t-lg hover:border-gray-300"
                    data-tabs-target="#your-attacks"
                    type="button">Your Attacks</button>
              </li>
              <li>
                <button
                    class="tab-link inline-block text-sm sm:text-base border-b-2 border-transparent rounded-t-lg hover:border-gray-300"
                    data-tabs-target="#test-attacks"
                    type="button">Test Attacks</button>
              </li>
            </ul>
        </div>
          
        <div class="tab-content">
            <div id="attacks-on-you" class="tab-pane">
                {% paginated_auth_attempt_table my_account=account defender=account %}
            </div>

            <div id="your-attacks" class="tab-pane hidden">
                {% paginated_auth_attempt_table my_account=account attacker=account %}
            </div>

            <div id="test-attacks" class="tab-pane hidden">
                {% paginated_auth_attempt_table my_account=account attacker=account defender=account %}
            </div>
        </div>
    </div>
{% endblock %}