{% extends "base.html" %}

{% block title %}Forgot Password - 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%); }
    @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">
                Password Reset
            </h1>
            <p class="text-lg sm:text-xl text-gray-600">
                Need help with your password?
            </p>
        </div>

        <!-- Reset Instructions Card -->
        <div class="bg-white rounded-xl sm:rounded-2xl shadow-xl p-6 sm:p-8 fade-in-up">
            <div class="text-center">
                <!-- Icon -->
                <div class="mx-auto flex items-center justify-center h-12 w-12 sm:h-16 sm:w-16 rounded-full bg-blue-100 mb-4 sm:mb-6">
                    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                    </svg>
                </div>

                <!-- Main Message -->
                <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-3 sm:mb-4">
                    Password Reset Required
                </h2>
                
                <p class="text-sm sm:text-base text-gray-600 mb-4 sm:mb-6 leading-relaxed">
                    For security reasons, password resets must be handled through your institution's administration.
                </p>

                <!-- Instructions -->
                <div class="bg-blue-50 rounded-lg p-4 sm:p-6 mb-4 sm:mb-6">
                    <h3 class="text-base sm:text-lg font-semibold text-blue-900 mb-2 sm:mb-3">
                        To reset your password:
                    </h3>
                    <div class="text-left space-y-2 sm:space-y-3">
                        <div class="flex items-start">
                            <svg class="h-4 w-4 sm:h-5 sm:w-5 text-blue-600 mt-1 mr-2 sm:mr-3 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>
                            <p class="text-xs sm:text-sm text-blue-800">Visit the <strong>Head of Department (HoD) - English Department</strong></p>
                        </div>
                        <div class="flex items-start">
                            <svg class="h-4 w-4 sm:h-5 sm:w-5 text-blue-600 mt-1 mr-2 sm:mr-3 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>
                            <p class="text-xs sm:text-sm text-blue-800">Bring your student ID and enrollment documents</p>
                        </div>
                        <div class="flex items-start">
                            <svg class="h-4 w-4 sm:h-5 sm:w-5 text-blue-600 mt-1 mr-2 sm:mr-3 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>
                            <p class="text-xs sm:text-sm text-blue-800">Request a password reset for your Try English AI account</p>
                        </div>
                    </div>
                </div>

                <!-- Contact Information -->
                <div class="bg-gray-50 rounded-lg p-4 sm:p-6 mb-4 sm:mb-6">
                    <h3 class="text-base sm:text-lg font-semibold text-gray-900 mb-2 sm:mb-3">
                        Contact Information
                    </h3>
                    <div class="text-xs sm:text-sm text-gray-600 space-y-1 sm:space-y-2">
                        <p><strong>Department:</strong> English Department</p>
                        <p><strong>Office:</strong> Head of Department Office</p>
                        <p><strong>Hours:</strong> Monday - Friday, 9:00 AM - 5:00 PM</p>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-2 sm:space-y-3">
                    <a 
                        href="{{ url_for('auth.login') }}" 
                        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-sm sm:text-base inline-block"
                    >
                        Back to Login
                    </a>
                    <a 
                        href="{{ url_for('main.index') }}" 
                        class="w-full bg-gray-200 text-gray-700 px-4 py-2 sm:py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors text-sm sm:text-base inline-block"
                    >
                        Return to Home
                    </a>
                </div>
            </div>
        </div>

        <!-- Help 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">Need immediate help?</h3>
            <p class="text-sm sm:text-base text-gray-600 mb-3 sm:mb-4 leading-relaxed">
                If you're having trouble accessing your account or need urgent assistance, 
                you can also contact your course instructor or visit the English Department office directly.
            </p>
        </div>

        <!-- Sign Up Link -->
        <div class="mt-6 sm:mt-8 text-center fade-in-up">
            <p class="text-sm sm:text-base text-gray-600">
                Don't have an account yet? 
                <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>
{% endblock content %}