{% extends 'website/home/base.html' %}
{% block title %} Customer Register {% endblock %}

{% block content %}
<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
    <div class="card shadow p-4 mb-4" style="width: 450px; border-radius: 15px;">
        <div class="text-center mb-2">
            <h4 class="fw-bold">📝 Create Account</h4> 
        </div>

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

            <!-- Full Name -->
            <div class="mb-3">
                <label for="name" class="form-label fw-bold">Full Name</label>
                <input type="text" class="form-control" id="name" name="customer_name" placeholder="Enter your full name" required>
            </div>

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

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

            <!-- Username -->
            <div class="mb-3">
                <label for="username" class="form-label fw-bold">Username</label>
                <input type="text" class="form-control" id="username" name="username" placeholder="Choose a username" 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>

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

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

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

            <!-- Social Register (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> -->

            <!-- Already Have Account -->
            <p class="text-center mb-0">
                Already have an account? <a href="{% url 'customer_login' %}" class="fw-bold">Login</a>
            </p>
        </form>
    </div>
</div>
{% endblock %}