{% extends 'shop/base.html' %}
{% block title %}Reset Password - Nana Tradings{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card reset-card shadow-lg border-0">
                <!-- ✅ Gradient Header -->
                <div class="card-header text-center bg-gradient reset-header">
                    <h3 class="fw-bold reset-title"><i class="fas fa-key me-2"></i> Reset Your Password</h3>
                    <p class="small reset-subtext">We will send you a password reset link via email.</p>
                </div>

                <!-- ✅ Card Body -->
                <div class="card-body p-4">
                    <p class="text-center instruction-text">
                        Enter your **email address** and we'll send you a link to reset your password.
                    </p>

                    <!-- ✅ Password Reset Form -->
                    <form method="POST">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="email" class="form-label fw-bold reset-label"><i class="fas fa-envelope me-2"></i> Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text reset-icon"><i class="fas fa-envelope"></i></span>
                                <input type="email" class="form-control reset-input" name="email" required placeholder="Enter your email">
                            </div>
                            <small class="form-text help-text">Ensure you enter the registered email address.</small>
                        </div>

                        <!-- ✅ Submit Button -->
                        <button type="submit" class="btn reset-btn w-100 fw-bold">
                            <i class="fas fa-paper-plane me-2"></i> Send Reset Link
                        </button>
                    </form>
                </div>

                <!-- ✅ Footer Links -->
                <div class="card-footer text-center reset-footer">
                    <p class="mb-1">
                        <a href="{% url 'login' %}" class="reset-link fw-bold"><i class="fas fa-sign-in-alt"></i> Back to Login</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Custom Styling -->
<style>
/* 🌟 General Reset Page Styles */
.reset-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

.reset-card:hover {
    transform: scale(1.02);
}

/* ✅ Light Mode Header */
.reset-header {
    background: linear-gradient(135deg, #148818, #0f6f12);
    color: white;
}

/* ✅ Header Text */
.reset-title {
    color: #148818 !important; /* Ensuring visibility in light mode */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.reset-subtext {
    color: #148818 !important; /* Ensuring subtext is readable in light mode */
    font-size: 15px;
}

/* ✅ Dark Mode Adjustments */
.dark-mode .reset-card {
    background: #2b2b2b;
    color: white;
}

.dark-mode .reset-header {
    background: linear-gradient(135deg, #00c853, #008000);
}

.dark-mode .reset-title {
    color: #00e676;
}

.dark-mode .reset-subtext {
    color: #00e676 !important;
}

/* 🎨 Input Styling */
.input-group-text {
    background-color: #148818;
    color: white;
    border: none;
}

.reset-input:focus {
    border-color: #148818;
    box-shadow: 0 0 5px rgba(20, 136, 24, 0.5);
}

.dark-mode .reset-input {
    background: #333;
    color: white;
    border-color: #00c853;
}

.dark-mode .input-group-text {
    background: #00c853;
    color: black;
}

/* ✅ Help Text for Inputs */
.help-text {
    font-size: 13px;
    color: #148818;
}

.dark-mode .help-text {
    color: #00e676;
}

/* ✅ Reset Button */
.reset-btn {
    background-color: #148818;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.reset-btn:hover {
    background-color: #0f6f12;
}

/* ✅ Footer */
.reset-footer {
    background-color: #f8f9fa;
}

.dark-mode .reset-footer {
    background: #222;
}

/* ✅ Footer Links */
.reset-link {
    color: #148818;
    transition: all 0.3s ease-in-out;
}

.reset-link:hover {
    text-decoration: underline;
}

.dark-mode .reset-link {
    color: #00e676;
}

</style>

<!-- FontAwesome Icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
{% endblock %}