{% if locked %}
    <div class="bg-red-100 border-red-200 mt-6 p-3 border-2" role="alert">
        <div class="flex md:flex-row flex-col justify-between items-left md:items-center border-b pb-1 mb-1 border-red-200">
            {% if has_been_attacked %}
                <h1 class="font-semibold md:mb-0">
                    🔒 Your account is locked because someone broke in!
                </h1>
                <p class="text-left">⏱️ <span class="font-semibold">Auto-Unlock:</span> {{ auto_unlock_time_left }}</p>
            {% else %}
                <h1 class="font-semibold md:mb-0">
                    🌱 Getting Started
                </h1>
            {% endif %}
        </div>
    <p>
        {% if has_been_attacked %}
            Try <a class="underline" href="{% url 'security' %}">updating your defense</a>.
        {% else %}
            Start off by <a class="underline" href="{% url 'security' %}">setting your defense</a>.
        {% endif %}
        After that, <a class="underline" href="{% url 'subaccounts' %}">unlock your account</a> to attack players.
    </p>
</div>

{% endif %}