{% if settings['register_page'] == 2 %}
{% include 'header.twig' %}

<div id="notAuthed">
    <style>
        /* Background Styling */
        #notAuthed {
            background: url('https://cdn.mypanel.link/92zqvd/phs8bkrzi686e3qi.png') no-repeat top center;
            background-size: cover;
            background-attachment: fixed;
            min-height: 100vh;
            /* Yahan padding-top badha di hai taki header ke sath overlap na ho */
            padding: 140px 0 60px 0; 
            font-family: 'Inter', 'Segoe UI', sans-serif;
        }

        /* Content & Text Animations */
        .signup_content {
            text-align: center;
            margin-bottom: 40px;
            animation: fadeInDown 1s ease-in-out;
        }
        .signup_content h1 {
            font-weight: 800;
            color: #2c3e50;
            text-shadow: 2px 2px 10px rgba(0,0,0,0.1);
        }
        .signup_content p {
            font-size: 1.1rem;
            color: #596a7b;
            margin-top: 10px;
        }
        .primary-color {
            color: #4e73df; /* Modern Blue */
        }

        /* Modern Card Styling with Glassmorphism Effect */
        .signup_form .card {
            border: none;
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            animation: fadeInUp 0.8s ease-out;
            overflow: hidden;
        }
        .signup_form .card-body {
            padding: 40px 30px;
        }

        /* Input Fields Styling */
        .login-label {
            font-weight: 600;
            color: #4a5568;
            margin-bottom: 8px;
            display: inline-block;
            font-size: 0.95rem;
        }
        .login-control {
            position: relative;
        }
        .login-control .icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #a0aec0;
            font-size: 1.25rem;
            transition: color 0.3s ease;
            z-index: 10;
        }
        .login-control .form-control {
            padding-left: 48px;
            height: 52px;
            border-radius: 12px;
            border: 2px solid #e2e8f0;
            background-color: #f8fafc;
            font-size: 1rem;
            color: #2d3748;
            transition: all 0.3s ease;
            box-shadow: none;
        }
        .login-control .form-control:focus {
            border-color: #667eea;
            background-color: #ffffff;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
            outline: none;
        }
        .login-control:focus-within .icon {
            color: #667eea;
        }

        /* Checkbox Styling */
        .custom-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 25px;
        }
        .custom-checkbox input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #667eea;
        }
        .custom-checkbox label {
            margin: 0;
            color: #4a5568;
            cursor: pointer;
            font-size: 0.95rem;
        }

        /* Gradient Button with Hover Effect */
        .btn-primary.btn-100 {
            width: 100%;
            height: 52px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: #fff;
            transition: all 0.3s ease;
            box-shadow: 0 8px 15px rgba(102, 126, 234, 0.3);
        }
        .btn-primary.btn-100:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 20px rgba(102, 126, 234, 0.4);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

        /* Animations Keyframes */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-40px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>

    <section id="signup">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="signup_content">
                        <h1>
                            Register to <span class="primary-color">{{ site['site_name'] }}</span>!
                        </h1>
                        <p>
                            Become a part of {{ site['site_name'] }} now! <br> Fill out the short form and register.
                        </p>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-3 col-12"></div>
                
                <div class="col-lg-6 col-md-6 col-12">
                    <div class="signup_form">
                        <div class="card">
                            <div class="card-body">
                                {% if errorText %}
                                <div class="alert alert-dismissible alert-danger">
                                    {{ errorText }}
                                </div>
                                {% endif %}
                                {% if successText %}
                                <div class="alert alert-dismissible alert-success">
                                    {{ successText }}
                                </div>
                                {% endif %}

                                <form action="" method="post">
                                    <!-- Username Field -->
                                    <div class="mb-4">
                                        <label class="login-label" for="login">Username</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-user-line"></i></div>
                                            <input type="text" class="form-control" id="login" name="username"
                                                value="{{ data['username'] }}" placeholder="Enter your username (No spaces)" autocomplete="off">
                                        </div>
                                    </div>

                                    <!-- Name Field -->
                                    {% if settings['name_fileds'] == 1 %}
                                    <div class="mb-4">
                                        <label class="login-label" for="firstname">Full Name</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-user-line"></i></div>
                                            <input type="text" class="form-control" id="firstname" name="name"
                                                value="{{ data['name'] }}" placeholder="Enter your full name" autocomplete="off">
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- Email Field -->
                                    <div class="mb-4">
                                        <label class="login-label" for="email">Email Address</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-mail-line"></i></div>
                                            <input type="email" class="form-control" id="email" name="email"
                                                value="{{ data['email'] }}" placeholder="Enter your email address" autocomplete="email">
                                        </div>
                                    </div>

                                    <!-- Phone Number Field (Auto 91 Added) -->
                                    {% if settings['skype_area'] == 2 %}
                                    <div class="mb-4">
                                        <label class="login-label" for="telephone">Phone Number (with country code)</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-phone-line"></i></div>
                                            <input type="text" class="form-control" id="telephone" name="telephone"
                                                value="{{ data['telephone'] ? data['telephone'] : '91' }}" placeholder="91XXXXXXXXXX" autocomplete="off">
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- WhatsApp Field (Auto 91 Added) -->
                                    {% if settings['whatsapp_field'] == 1 %}
                                    <div class="mb-4">
                                        <label class="login-label" for="whatsapp">WhatsApp (with country code)</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-whatsapp-line"></i></div>
                                            <input type="text" class="form-control" id="whatsapp" name="whatsapp"
                                                value="{{ data['whatsapp'] ? data['whatsapp'] : '91' }}" placeholder="91XXXXXXXXXX" autocomplete="off">
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- Telegram Field -->
                                    {% if settings['telegram_field'] == 1 %}
                                    <div class="mb-4">
                                        <label class="login-label" for="telegram">Telegram</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-telegram-line"></i></div>
                                            <input type="text" class="form-control" id="telegram" name="telegram"
                                                value="{{ data['telegram'] }}" placeholder="Enter your Telegram username" autocomplete="off">
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- Website Field -->
                                    {% if settings['website_field'] == 1 %}
                                    <div class="mb-4">
                                        <label class="login-label" for="website">Website</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-global-line"></i></div>
                                            <input type="text" class="form-control" id="website" name="website"
                                                value="{{ data['website'] }}" placeholder="Enter your website URL" autocomplete="off">
                                        </div>
                                    </div>
                                    {% endif %}

                                    <!-- Password Fields -->
                                    <div class="mb-4">
                                        <label class="login-label" for="password">Password</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-lock-line"></i></div>
                                            <input type="password" class="form-control" id="password" name="password"
                                                value="{{ data['password'] }}" placeholder="Create a strong password" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="mb-4">
                                        <label class="login-label" for="password_again">Confirm Password</label>
                                        <div class="login-control">
                                            <div class="icon"><i class="ri-lock-line"></i></div>
                                            <input type="password" class="form-control" id="password_again"
                                                name="password_again" value="{{ data['password_again'] }}"
                                                placeholder="Re-enter your password" autocomplete="off">
                                        </div>
                                    </div>

                                    <!-- Terms and Conditions -->
                                    {% if settings['terms_checkbox'] == 2 %}
                                    <div class="form-group custom-checkbox">
                                        <input type="checkbox" id="terms" name="terms" value="1">
                                        <label for="terms">{{ lang['signup.accept_terms_text'] }}</label>
                                    </div>
                                    {% endif %}

                                    <!-- Submit Button -->
                                    <button type="submit" class="btn btn-primary btn-100">Create Account</button>

                                    <div class="text-center mt-4">
                                        <span style="color: #718096;">Already have an account?</span> 
                                        <a href="/" style="color: #667eea; font-weight: 600; text-decoration: none;">Sign in</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-3 col-md-3 col-12"></div>
            </div>
        </div>
    </section>
</div>

<!-- Custom Scripts for Space Removal and 91 Prefix -->
<script>
document.addEventListener("DOMContentLoaded", function() {
    
    // 1. Username Space Remover (Typing karte waqt hi space hata dega)
    const usernameInput = document.getElementById('login');
    if (usernameInput) {
        usernameInput.addEventListener('input', function() {
            this.value = this.value.replace(/\s/g, ''); // Space block
        });
        usernameInput.addEventListener('blur', function() {
            this.value = this.value.replace(/\s/g, ''); // Extra safety on click outside
        });
    }

    // 2. Auto '91' Attacher function (Agar user ne '91' delete karke 10 digits type kiye)
    function autoAddCountryCode(inputId) {
        const inputField = document.getElementById(inputId);
        if (inputField) {
            inputField.addEventListener('blur', function() {
                let val = this.value.trim();
                // Agar user ne sirf 10 digits dale hain (91 nahi lagaya)
                if (val.length === 10 && !val.startsWith('91')) {
                    this.value = '91' + val;
                }
            });
        }
    }

    // Apply to Phone & Whatsapp
    autoAddCountryCode('telephone');
    autoAddCountryCode('whatsapp');

});
</script>

{% include 'footer.twig' %}
{% endif %}