{% extends 'theme/users_base.html' %}
{% load static %}

{% block title %}Login - AL WASAY{% endblock %}

{% block content %}
<div class="min-h-screen bg-accent flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-semibold font-poppins text-primary">Login to Your Account</h1>
            <p class="mt-2 text-secondary font-poppins">Welcome back! Please enter your credentials.</p>
        </div>

        {% if messages %}
        <div class="mb-6">
            {% for message in messages %}
                <div class="{% if message.tags == 'success' %}bg-green-50 border-green-200 text-green-700{% else %}bg-red-50 border-red-200 text-red-700{% endif %} border px-4 py-3 rounded-md font-poppins">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
        {% endif %}

        <form method="post" class="bg-white shadow-sm rounded-lg p-8">
            {% csrf_token %}
            
            <div class="mb-6">
                <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">Email</label>
                {{ form.email }}
                {% if form.email.errors %}
                    <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.email.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="mb-6">
                <label class="block text-sm font-medium font-poppins text-primary-dark mb-1">Password</label>
                {{ form.password }}
                {% if form.password.errors %}
                    <p class="mt-1 text-sm text-red-600 font-poppins">{{ form.password.errors.0 }}</p>
                {% endif %}
            </div>

            <button type="submit" 
                class="w-full px-8 py-3 bg-primary-dark text-accent font-medium font-poppins rounded-md hover:bg-primary transition">
                Login
            </button>

            <div class="mt-6 text-center">
                <p class="text-sm text-secondary font-poppins">
                    Don't have an account? 
                    <a href="{% url 'users:register' %}" class="text-primary hover:text-primary-dark font-medium transition">Register here</a>
                    <a href="/" class="text-primary flex items-center justify-center text-sm font-medium font-poppins mt-6">Back to Website</a>
                </p>
            </div>
        </form>
    </div>
</div>
{% endblock %}