{% extends "base.html" %}

{% block title %}Welcome Back - Try English AI{% endblock %}

{% block extra_css %}
<script src="https://cdn.tailwindcss.com"></script>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
    body { font-family: 'Inter', sans-serif; }
    .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .form-input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in-up { animation: fadeInUp 0.6s ease-out; }
</style>
{% endblock extra_css %}

{% block content %}
<!-- Main Content -->
<div class="bg-gray-50 min-h-screen">
    <div class="max-w-md mx-auto px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8 sm:mb-12 fade-in-up">
            <div class="flex justify-center mb-4 sm:mb-6">
                <div class="w-12 h-12 sm:w-16 sm:h-16 bg-indigo-600 rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg">
                    <img src="{{ url_for('static', filename='images/icon.png') }}" alt="Try English" class="w-8 h-8 sm:w-10 sm:h-10 rounded-lg">
                </div>
            </div>
            <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-2 sm:mb-4">
                Welcome Back!
            </h1>
            <p class="text-lg sm:text-xl text-gray-600">
                Sign in to continue your learning journey
            </p>
        </div>

        <!-- Login Form -->
        <div class="bg-white rounded-xl sm:rounded-2xl shadow-xl p-6 sm:p-8 fade-in-up">
            <form method="POST" class="space-y-4 sm:space-y-6">
                {{ form.hidden_tag() }}
                
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                        Email Address
                    </label>
                    {{ form.email(class="form-input w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base", placeholder="Enter your email address", id="email") }}
                    {% if form.email.errors %}
                        <div class="mt-2 text-red-600 text-sm">
                            {% for error in form.email.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                        Password
                    </label>
                    {{ form.password(class="form-input w-full px-3 py-2 sm:px-4 sm:py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-colors text-sm sm:text-base", placeholder="Enter your password", id="password") }}
                    {% if form.password.errors %}
                        <div class="mt-2 text-red-600 text-sm">
                            {% for error in form.password.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>

                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                        <label for="remember-me" class="ml-2 block text-sm text-gray-700">
                            Remember me
                        </label>
                    </div>
                    <div class="text-sm">
                        <a href="{{ url_for('auth.forgot_password') }}" class="text-indigo-600 hover:text-indigo-700 font-medium transition-colors">
                            Forgot password?
                        </a>
                    </div>
                </div>

                <div class="pt-2">
                    <button 
                        type="submit"
                        class="w-full bg-indigo-600 text-white px-4 py-2 sm:py-3 rounded-lg font-semibold hover:bg-indigo-700 transition-colors focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-base sm:text-lg"
                    >
                        Sign In
                    </button>
                </div>
            </form>
        </div>

        <!-- Benefits Section -->
        <div class="mt-8 sm:mt-12 text-center fade-in-up">
            <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">Continue your progress with:</h3>
            <div class="grid grid-cols-1 gap-3 sm:gap-4">
                <div class="flex items-center justify-center">
                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm sm:text-base text-gray-600">Personalized learning paths</span>
                </div>
                <div class="flex items-center justify-center">
                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm sm:text-base text-gray-600">AI-powered progress tracking</span>
                </div>
                <div class="flex items-center justify-center">
                    <svg class="w-4 h-4 sm:w-5 sm:h-5 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="text-sm sm:text-base text-gray-600">Interactive exercises & assessments</span>
                </div>
            </div>
        </div>

        <!-- Sign Up Link -->
        <div class="mt-8 sm:mt-12 text-center fade-in-up">
            <p class="text-sm sm:text-base text-gray-600">
                New to Try English AI? 
                <a href="{{ url_for('auth.signup') }}" class="text-indigo-600 hover:text-indigo-700 font-medium transition-colors">
                    Create an account
                </a>
            </p>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Real-time validation feedback
    document.querySelectorAll('input[type="email"], input[type="password"]').forEach(field => {
        field.addEventListener('blur', function() {
            if (this.hasAttribute('required') && !this.value.trim()) {
                this.classList.add('border-red-500');
            } else {
                this.classList.remove('border-red-500');
            }
        });

        field.addEventListener('input', function() {
            this.classList.remove('border-red-500');
        });
    });

    // Email validation
    const emailField = document.getElementById('email');
    if (emailField) {
        emailField.addEventListener('blur', function() {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (this.value && !emailRegex.test(this.value)) {
                this.classList.add('border-red-500');
            } else {
                this.classList.remove('border-red-500');
            }
        });
    }

    // Focus animations
    document.querySelectorAll('input').forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('transform', 'scale-[1.02]');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('transform', 'scale-[1.02]');
        });
    });
});
</script>
{% endblock content %}