{% load gameui %}
<div id="account-list">
    <h1 class="md:text-xl pt-4 mb-2 font-semibold">{% if account.unlock_at is None %}Attack other players{% else %}Attack an acccount{% endif %} ⚔️</h1>
    <table class="w-full mt-2">
        <thead class="justify-between">
            <tr class="bg-gray-800 border text-left border-gray-800">
                <th scope="col" class="pl-4 py-1 text-white">Account</th>
                <th scope="col" class="pl-4 py-1 text-white text-center">Tier</th>
                <th scope="col" class="pl-4 py-1 text-white text-center">Balance</th>
            </tr>
        </thead>
        <tbody class="text-sm">
            {% if account.locked is not True %}
                {% for current_account in accounts %}
                    <tr class="bg-white border border-gray-300">
                        <td class="pl-4 py-1">
                            <div class="truncate">
                                {% pretty_account_link my_account=account target_account=current_account %}
                            </div>
                        </td>
                        <td class="pl-4 py-1 text-center">{% tier current_account.balance "emoji" %}</td>
                        <td class="pl-4 py-1 text-center">${{ current_account.balance }}</td>
                    </tr>
                {% empty %}
                    <tr class="bg-white border border-gray-300">
                        <td class="mb-4 px-1 py-1 text-center text-gray-500" colspan=5>No accounts found.</td>
                    </tr>
                {% endfor %}
            {% else %}
            <tr class="bg-white border border-gray-300">
                <td class="mb-4 px-1 py-1 text-center text-gray-500" colspan=5>🔒
                    <span class="font-semibold">Your account is locked.</span>
                    {% if account.unlock_at is not None %}
                        Once unlocked, other accounts can attack you, too. We recommend <a class="underline" href="{% url 'security' %}">strengthening your defense</a>.
                    {% else %}
                        Other players won't be able to attack you, but you also can't attack them.
                        <br/>
                        Click the button below once you're ready to start playing against real players.
                    {% endif %}
                </td>
            </tr>
            {% endif %}
        </tbody>
    </table>
    {% if account.unlock_at is not None %}
        {% include "tier_list_postscript.html" with show_protection_message=True %}
    {% endif %}

    <div class="flex flex-col sm:flex-row justify-between items-center mt-2">
        <div class="w-full mx-auto sm:w-auto sm:mb-0">
            {% if account.locked is not True %}
            <form hx-post="{% url 'subaccounts_refresh' %}"
                hx-target="#account-list"
                hx-indicator="#spinner"
                class="relative">
                {% csrf_token %}
                <button
                    type="submit"
                    class="w-full sm:w-auto mt-2 px-10 btn inline-block">
                    Refresh 🔄
                </button>
                {% include "absolute_spinner.html" %}
            </form>
            {% else %}
            <form method="post" action="{% url 'unlock_account' %}">
                {% csrf_token %}
                <div class="flex flex-col sm:flex-row items-center"></div>
                    <button type="submit" class="w-full sm:w-auto mt-2 px-10 btn bg-red-500 hover:bg-red-300 inline-block">
                        {% if account.unlock_at is None %}
                            I'm ready to attack ⚔
                        {% else %}
                            Unlock ⚔
                        {% endif %}
                    </button>
                </form>
            </form>
            {% endif %}
        </div>
    </div>
</div>