{% extends 'events/base.html' %}
{% load static %}

{% block title %}Login - Lusaka Internet Meetup{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6 col-lg-5">
                <div class="text-center mb-4">
                    <img src="{% static 'img/bloggers_of_zed_logo.png' %}" alt="Bloggers of Zambia Logo" 
                         class="img-fluid mb-4" style="max-height: 100px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));">
                    <h2 class="display-6 fw-bold mb-2">Welcome Back</h2>
                    <p class="text-muted mb-4">Sign in to your account to continue</p>
                </div>

                <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                    <div class="card-body p-4 p-lg-5">
                        {% if form.errors %}
                        <div class="alert alert-danger d-flex align-items-center rounded-3 mb-4" role="alert">
                            <i class="bi bi-exclamation-circle-fill me-2"></i>
                            <div>Invalid username or password. Please try again.</div>
                        </div>
                        {% endif %}

                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            {% for field in form %}
                            <div class="form-floating mb-4">
                                {{ field }}
                                <label for="{{ field.id_for_label }}">
                                    <i class="bi {% if field.name == 'username' %}bi-person{% else %}bi-lock{% endif %} me-2"></i>
                                    {{ field.label }}
                                </label>
                                {% if field.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ field.errors|join:', ' }}
                                </div>
                                {% endif %}
                            </div>
                            {% endfor %}

                            <div class="d-grid gap-3">
                                <button class="btn btn-primary btn-lg" type="submit">
                                    <i class="bi bi-box-arrow-in-right me-2"></i>Sign in
                                </button>
                                <a href="{% url 'password_reset' %}" class="btn btn-link text-decoration-none">
                                    <i class="bi bi-key me-2"></i>Forgot your password?
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="text-center mt-4">
                    <p class="mb-0">Don't have an account? 
                        <a href="{% url 'events:register' %}" class="btn btn-link text-decoration-none p-0 align-baseline">
                            Register here
                            <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}