{% load gameui %}
<div class="mb-2">
    <h1 class="md:text-xl pt-4 font-semibold">Learn how to play 📚</h1>
    <p>Earn some bounty from defeating tutorial accounts.</p>
</div>
<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">Bounty</th>
            <th scope="col" class="pl-4 py-1 text-white text-center">Status</th>
        </tr>
    </thead>
    <tbody class="text-sm">
        {% for current_account in tutorial_accounts %}
        <tr class="bg-white border border-gray-300">
            <td class="pl-4 py-1">
                <div class="truncate">
                <span title="{{ target_title_text }}">
                    {% if account.tutorial_step >= forloop.counter %}
                        🟢
                        <a class="underline" href="{% url 'tutorial' step=forloop.counter %}">
                            {{current_account.account_name}}
                        </a>
                    {% else %}
                        🔒 {{current_account.account_name}}
                    {% endif %}
                </span>
                </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.bounty }}</td>
            <td class="pl-4 py-1 text-center">
                {% if account.tutorial_step > forloop.counter %}✅ Completed
                {% elif account.tutorial_step == forloop.counter %}🏃 In progress
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>