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

{% block content %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card login-card shadow-lg rounded-4 border-0">
                <!-- ✅ Gradient Header -->
                <div class="card-header text-center bg-gradient login-header">
                    <h3 class="fw-bold login-title">Login to Your Account</h3>
                    <p class="small login-subtext">Access your account and continue shopping!</p>
                </div>

                <!-- Card Body -->
                <div class="card-body">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} text-center">{{ message }}</div>
                        {% endfor %}
                    {% endif %}

                    <form method="POST">
                        {% csrf_token %}

                        <!-- Username Field -->
                        <div class="mb-3">
                            <label for="username" class="form-label fw-bold login-label">Username</label>
                            <div class="input-group">
                                <span class="input-group-text login-icon"><i class="fas fa-user"></i></span>
                                <input type="text" class="form-control login-input" id="username" name="username" placeholder="Enter your username" required>
                            </div>
                            <small class="form-text help-text">Your unique username for logging in.</small>
                        </div>

                        <!-- Password Field with Toggle Eye Icon -->
                        <div class="mb-3">
                            <label for="password" class="form-label fw-bold login-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text login-icon"><i class="fas fa-lock"></i></span>
                                <input type="password" class="form-control login-input" id="password" name="password" placeholder="Enter your password" required>
                                <span class="input-group-text password-toggle" onclick="togglePassword()">
                                    <i class="fas fa-eye text-gray1" id="toggleEye"></i>
                                </span>
                            </div>
                            <small class="form-text help-text">Must be at least 8 characters long.</small>
                        </div>

                        <!-- Login Button -->
                        <button type="submit" class="btn login-btn w-100 fw-bold">
                            <i class="fas fa-sign-in-alt me-2"></i> Login
                        </button>
                    </form>
                </div>

                <!-- Footer Links -->
                <div class="card-footer text-center login-footer rounded-bottom">
                    <p class="mb-1">
                        <a href="{% url 'password_reset' %}" class="fw-bold text-decoration-none login-link">
                            <i class="fas fa-unlock-alt"></i> Forgot Password?
                        </a>
                    </p>
                    <p class="mb-0">Don't have an account? 
                        <a href="{% url 'register' %}" class="fw-bold text-decoration-none login-link">
                            <i class="fas fa-user-plus"></i> Sign Up
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ✅ Show/Hide Password Script -->
<script>
    function togglePassword() {
        let passwordField = document.getElementById("password");
        let toggleEye = document.getElementById("toggleEye");

        if (passwordField.type === "password") {
            passwordField.type = "text";
            toggleEye.classList.remove("fa-eye", "text-gray");
            toggleEye.classList.add("fa-eye-slash", "text-orange");
        } else {
            passwordField.type = "password";
            toggleEye.classList.remove("fa-eye-slash", "text-orange");
            toggleEye.classList.add("fa-eye", "text-gray");
        }
    }
</script>

<style>
/* 🌟 General Login Page Styles */
.login-card {
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
}

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

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

/* ✅ Light Mode Header Text - Green */
.login-title {
    color: #148818 !important;
}

.login-subtext {
    color: #148818 !important;
}

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

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

/* ✅ Dark Mode Header Text - White */
.dark-mode .login-title {
    color: white !important;
}

.dark-mode .login-subtext {
    color: #f0f0f0 !important;
}

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

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

.dark-mode .login-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;  /* Default Green */
}

.dark-mode .help-text {
    color: #00e676; /* Bright Green for Dark Mode */
}

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

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

/* 👁️ Password Toggle Icon */
.password-toggle {
    cursor: pointer;
}

.password-toggle i {
    transition: all 0.2s ease-in-out;
}

/* ✅ Default Show Password (Gray) */
.text-gray {
    color: gray;
}

.text-gray1 {
    color: rgb(255, 255, 255);
}

/* 🔒 Hide Password (Orange) */
.text-orange {
    color: #FFA500;
}

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

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

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

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

.dark-mode .login-link {
    color: #00e676;
}
</style>
{% endblock %}