{% extends 'landing/base_landing.html' %}

{% block title %}Forgot Password - Reset Your Password | 3ncount2026{% endblock %}

{% block extra_css %}
<style>
    .forgot-password-section {
        padding: 4rem 0;
        background: var(--light-bg);
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .forgot-password-card {
        background: white;
        border-radius: 1rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .forgot-password-header {
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
        color: white;
        padding: 2rem;
        text-align: center;
    }
    
    .forgot-password-header i {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .forgot-password-header h2 {
        margin: 0 0 0.5rem;
        font-weight: 700;
    }
    
    .forgot-password-header p {
        margin: 0;
        opacity: 0.95;
        font-size: 0.875rem;
    }
    
    .forgot-password-body {
        padding: 2.5rem;
    }
    
    .form-label {
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 0.5rem;
        transition: all 0.3s ease;
    }
    
    .form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.1);
    }
    
    .info-box {
        background: rgba(37, 99, 235, 0.05);
        border-left: 4px solid var(--primary-color);
        padding: 1rem;
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .info-box p {
        margin: 0;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }
    
    .back-to-login {
        text-align: center;
        margin-top: 1.5rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
    }
    
    .back-to-login a {
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .back-to-login a:hover {
        text-decoration: underline;
    }
</style>
{% endblock %}

{% block content %}
<section class="forgot-password-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-lg-5 mx-auto">
                <div class="forgot-password-card">
                    <div class="forgot-password-header">
                        <i class="bi bi-key"></i>
                        <h2>Forgot Password?</h2>
                        <p>No worries, we'll help you reset it</p>
                    </div>
                    
                    <div class="forgot-password-body">
                        <div class="info-box">
                            <p>
                                <i class="bi bi-info-circle me-2"></i>
                                Enter your email address and we'll send you instructions to reset your password.
                            </p>
                        </div>
                        
                        <form method="post">
                            {% csrf_token %}
                            
                            <!-- Email -->
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" 
                                       placeholder="your@email.com" required autofocus>
                                <div class="form-text">
                                    We'll send reset instructions to this email address
                                </div>
                            </div>
                            
                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary-custom btn-lg w-100">
                                <i class="bi bi-send me-2"></i>Send Reset Instructions
                            </button>
                        </form>
                        
                        <!-- Back to Login -->
                        <div class="back-to-login">
                            <a href="{% url 'landing:login' %}">
                                <i class="bi bi-arrow-left"></i>
                                <span>Back to Login</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}