{% extends 'base.html' %}

{% load form_filters %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center min-vh-100">
    <div class="auth-form card shadow-sm p-4" style="max-width: 400px; width: 100%;">
        <h2 class="card-title text-center mb-4">Login</h2>
        <form method="post" novalidate>
            {% csrf_token %}
            <div class="mb-3">
                {{ form.username.label_tag }}
                {{ form.username|add_class:"form-control" }}
                {% if form.username.errors %}
                    <div class="invalid-feedback">
                        {{ form.username.errors.0 }}
                    </div>
                {% endif %}
            </div>
            <div class="mb-3">
                {{ form.password.label_tag }}
                {{ form.password|add_class:"form-control" }}
                {% if form.password.errors %}
                    <div class="invalid-feedback">
                        {{ form.password.errors.0 }}
                    </div>
                {% endif %}
            </div>
            <div class="mb-3 form-check">
                <input type="checkbox" class="form-check-input" id="rememberMe" name="remember_me">
                <label class="form-check-label" for="rememberMe">Remember Me</label>
            </div>
            <div class="mb-3 text-center">
                <button type="submit" class="btn btn-primary w-100">Login</button>
            </div>
        </form>
        <div class="text-center mt-3">
            <a href="{% url 'password_reset' %}">Forgot your password?</a>
        </div>
        <div class="text-center mt-2">
            <a href="{% url 'signup' %}">Don't have an account? Sign up here</a>
        </div>
        <div class="mb-3 text-center">
            <button type="button" class="btn btn-outline-secondary w-100 mb-2">
                <i class="fab fa-google"></i> Login with Google
            </button>
            <button type="button" class="btn btn-outline-secondary w-100">
                <i class="fab fa-facebook"></i> Login with Facebook
            </button>
        </div>
    </div>
</div>
{% endblock %}