{% extends 'base/layout.html' %}

{% block content %}
<div
    style="max-width: 400px; margin: 4rem auto; background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
    <h2 style="margin-top: 0;">Login</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn" style="width: 100%;">Login</button>
    </form>
    <p style="margin-top: 1rem; text-align: center;">
        Don't have an account? <a href="{% url 'users:register' %}" style="color: var(--primary-color);">Register
            here</a>.
    </p>
    <p style="margin-top: 0.5rem; text-align: center;">
        Want to sell on TCGKof? <a href="{% url 'store:seller_register' %}" style="color: var(--primary-color);">Register here</a>.
    </p>
</div>
{% endblock %}