{% extends "auth/auth_base.html" %}

{% block title %}Login - Email Organizer{% endblock %}

{% block content %}
<div class="card bg-base-100 shadow-xl w-full max-w-sm">
    <div class="card-body p-6">
        <div class="text-center mb-6">
            <h1 class="text-2xl font-bold text-primary">
                <i class="fas fa-envelope mr-2"></i>
                Email Organizer
            </h1>
            <p class="text-base-content/70 text-sm mt-1">Sign in to your account</p>
        </div>
        
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ 'error' if category == 'error' else 'success' }} mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>{{ message }}</span>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
        
        <form method="POST" action="{{ url_for('auth.login') }}" class="space-y-4">
                <label for="email" class="floating-label">
                    <span class="label-text text-sm font-medium">Email</span>
                    <input type="email" id="email" name="email" class="input input-bordered w-full" placeholder="Enter your email" required>
                </label>
            
                <label for="password" class="floating-label">
                    <span class="label-text text-sm font-medium">Password</span>
                    <input type="password" id="password" name="password" class="input input-bordered w-full"
                        placeholder="Enter your password" required>
                </label>
            
                <label class="label cursor-pointer justify-start">
                    <input type="checkbox" name="remember" class="checkbox checkbox-primary">
                    <span class="label-text text-sm">Remember me</span>
                </label>
            
            <button type="submit" class="btn btn-primary w-full">
                <i class="fas fa-sign-in-alt mr-2"></i>
                Sign In
            </button>
        </form>
        
        <div class="text-center mt-6">
            <p class="text-base-content/70 text-sm">
                Don't have an account?
                <a href="{{ url_for('auth.signup') }}" class="link link-primary">
                    Sign up
                </a>
            </p>
        </div>
    </div>
</div>
{% endblock %}