{% extends "jobs/base.html" %}

{% block content %}
<style>
    /* Manual design saath merge karne ke liye custom CSS */
    .form-control {
        background-color: #f8f9fa !important; /* bg-light effect */
        border: none !important;
        border-radius: 10px !important;
        padding: 12px !important;
    }
    .card-header {
        background: linear-gradient(45deg, #0d6efd, #0b5ed7);
    }
    .input-group-text {
        border-radius: 10px 0 0 10px !important;
    }
    .form-control {
        border-radius: 0 10px 10px 0 !important;
    }
</style>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-5">
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <div class="card-header text-white text-center py-4 border-0">
                    <h3 class="fw-bold mb-0">Join Videsh Chalo</h3>
                    <small class="opacity-75">Create Your Account</small>
                </div>
                
                <div class="card-body p-4">
<form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
    {% csrf_token %}

    {% if form.errors %}
        <div class="alert alert-danger small py-2 rounded-3">
            {% for field in form %}
                {% for error in field.errors %}
                    <strong>{{ field.label }}:</strong> {{ error }}<br>
                {% endfor %}
            {% endfor %}
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>
    {% endif %}
    
    <div class="mb-3">
        <label class="form-label fw-bold small">Full Name</label>
        <div class="input-group shadow-sm rounded-3 overflow-hidden">
            <span class="input-group-text border-0 bg-light"><i class="fas fa-id-card text-muted"></i></span>
            <input type="text" name="full_name" class="form-control border-0 bg-light" placeholder="Enter Your Full Name" required>
        </div>
    </div>
    <!--️ HONEYPOT FIELD (Bots ke liye trap) -->
                <div style="display:none; visibility:hidden; height:0; width:0; overflow:hidden;">
                    <input type="text" name="website_url" tabindex="-1" autocomplete="off">
                </div>

    <div class="mb-3">
        <label class="form-label fw-bold small">Username</label>
        <div class="input-group shadow-sm rounded-3 overflow-hidden">
            <span class="input-group-text border-0 bg-light"><i class="fas fa-user text-muted"></i></span>
            <input type="text" name="username" class="form-control border-0 bg-light" placeholder="Enter Username" required>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold small">Email Address</label>
        <div class="input-group shadow-sm rounded-3 overflow-hidden">
            <span class="input-group-text border-0 bg-light"><i class="fas fa-envelope text-muted"></i></span>
            <input type="email" name="email" class="form-control border-0 bg-light" placeholder="email@example.com" required>
        </div>
    </div>

    <div class="mb-3">
        <label class="form-label fw-bold small">Password</label>
        <div class="input-group shadow-sm rounded-3 overflow-hidden">
            <span class="input-group-text border-0 bg-light"><i class="fas fa-lock text-muted"></i></span>
            <input type="password" name="password1" id="signPass" class="form-control border-0 bg-light" placeholder="Create Password" required>
            <button class="btn btn-light border-0" type="button" id="togglePassword_1" data-target="signPass">
                <i class="fas fa-eye text-muted"></i>
            </button>
        </div>
    </div>
    
    <div class="mb-3">
        <label class="form-label fw-bold small">Confirm Password</label>
        <div class="input-group shadow-sm rounded-3 overflow-hidden">
            <span class="input-group-text border-0 bg-light"><i class="fas fa-lock text-muted"></i></span>
            <input type="password" name="password2" id="signConfirm" class="form-control border-0 bg-light" placeholder="Repeat Password" required>
            <button class="btn btn-light border-0" type="button" id="togglePassword_2" data-target="signConfirm">
                <i class="fas fa-eye text-muted"></i>
            </button>
        </div>
    </div>
    <!--  Turnstile Widget (Fake Signup rokne ke liye) -->
                    <div class="cf-turnstile mt-3 mb-4" data-sitekey="0x4AAAAAACkBDDw9CHytmCFi"></div>

    <button type="submit" class="btn btn-warning w-100 fw-bold py-2 rounded-pill shadow mt-3 text-uppercase">
        SIGN UP <i class="fas fa-user-plus ms-2"></i>
    </button>
</form>

                    <div class="text-center mt-4">
                        <p class="text-muted small mb-2">Or join with</p>
                        <a href="{% url 'google_login' %}" class="btn btn-outline-dark btn-sm rounded-pill px-4">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg" width="15" class="me-2"> Google
                        </a>
                    </div>

                    <p class="text-center mt-4 small">
                        Have account? <a href="{% url 'account_login' %}" class="fw-bold text-decoration-none text-primary">Login here</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}