{% extends 'website/home/base.html' %}
{% load static %}
{% block title %} Customer Login {% endblock %}

{% block content %}

<div class="container d-flex justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="card shadow-lg p-4" style="width: 400px; border-radius: 15px;">
        <div class="text-center mb-4">
            <h4 class="fw-bold">🔐 Customer Login</h4>
            <p class="text-muted">Sign in to access your account</p>
        </div>

        <!-- Login Form -->
        <form method="post" action="">
            {% csrf_token %}

            <!-- Username / Email -->
            <div class="mb-3">
                <label for="username" class="form-label fw-bold">Username or Email</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="Enter username or email" required>
            </div>

            <!-- Password -->
            <div class="mb-3">
                <label for="password" class="form-label fw-bold">Password</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Enter password" required>
            </div>

            <!-- Remember Me + Forgot Password -->
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="rememberMe" name="remember">
                    <label class="form-check-label" for="rememberMe">Remember me</label>
                </div>
                <a href=" " class="text-decoration-none">Forgot password?</a>
            </div>

            <!-- Login Button -->
            <div class="d-grid mb-3">
                <button type="submit" class="btn btn-primary fw-bold">Login</button>
            </div>

            <!-- Divider -->
            <!-- <div class="text-center my-2">
                <small class="text-muted">or continue with</small>
            </div> -->

            <!-- Social Login (Optional) -->
            <!-- <div class="d-flex justify-content-center gap-2 mb-3">
                <a href="#" class="btn btn-outline-dark btn-sm"><i class="fab fa-google"></i> Google</a>
                <a href="#" class="btn btn-outline-primary btn-sm"><i class="fab fa-facebook"></i> Facebook</a>
            </div> -->

            <!-- Register Link -->
            <p class="text-center mb-0">
                Don't have an account? <a href="{% url 'customer_register' %}" class="fw-bold">Sign up</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}