{% extends 'base.html' %}

{% block content %}
<div style="max-width: 400px; margin: 0 auto;">
    <div class="rant-card">
        <h2>Login</h2>
        <form action="/login" method="POST">
            {% if error %}
            <div class="alert error active">{{ error }}</div>
            {% endif %}
            <div class="form-group">
                <label>Username or Email</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit" class="btn" style="width: 100%;">Login</button>
            <p style="text-align: center; margin-top: 1rem;">
                Don't have an account? <a href="#" onclick="showModal('register'); return false;">Sign up</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}