{% extends "layout.html" %}

{% block title %}Sign Up - Trade Signals{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container">
            <div class="auth-card">
                <div class="auth-header">
                    <div class="auth-icon">
                        <i data-lucide="user-plus"></i>
                    </div>
                    <h1>Create your account</h1>
                    <p class="auth-subtitle">Start trading with AI-powered signals</p>
                </div>

                <form method="POST" action="{{ url_for('auth.register') }}" class="auth-form" id="registerForm">
                    <div class="form-group">
                        <label for="full_name">
                            <i data-lucide="user" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Full Name
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="user" class="input-icon"></i>
                            <input type="text" id="full_name" name="full_name" required
                                pattern="[A-Za-z\s]+" title="Only letters and spaces allowed"
                                placeholder="John Doe"
                                value="{{ request.form.full_name if request.form }}"
                                autofocus>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">
                            <i data-lucide="mail" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Email Address
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="mail" class="input-icon"></i>
                            <input type="email" id="email" name="email" required
                                placeholder="you@company.com"
                                value="{{ request.form.email if request.form }}"
                                autocomplete="email">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="mobile">
                            <i data-lucide="smartphone" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Mobile Number
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="smartphone" class="input-icon"></i>
                            <input type="tel" id="mobile" name="mobile" required
                                pattern="[0-9]{10,15}" title="Enter a valid mobile number (10-15 digits)"
                                placeholder="10-digit mobile number"
                                value="{{ request.form.mobile if request.form }}">
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">
                            <i data-lucide="lock" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Create Password
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="lock" class="input-icon"></i>
                            <input type="password" id="password" name="password" required minlength="8"
                                placeholder="Minimum 8 characters">
                            <button type="button" class="password-toggle" onclick="togglePassword('password')" aria-label="Toggle password visibility">
                                <i data-lucide="eye" id="password-eye"></i>
                            </button>
                        </div>
                        <small class="form-help">At least 8 characters with uppercase, lowercase, and numbers</small>
                    </div>
                    
                    <div class="form-group">
                        <label for="retype_password">
                            <i data-lucide="lock" style="width: 14px; height: 14px; margin-right: 4px;"></i>
                            Confirm Password
                        </label>
                        <div class="input-with-icon">
                            <i data-lucide="lock" class="input-icon"></i>
                            <input type="password" id="retype_password" name="retype_password" required
                                placeholder="Re-enter your password">
                            <button type="button" class="password-toggle" onclick="togglePassword('retype_password')" aria-label="Toggle password visibility">
                                <i data-lucide="eye" id="retype_password-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">
                            <i data-lucide="check-circle" style="width: 16px; height: 16px; margin-right: 6px;"></i>
                            Create Account
                        </button>
                    </div>
                    
                    <div class="auth-footer">
                        <p>Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a></p>
                    </div>

                    <div class="auth-trust">
                        <i data-lucide="shield-check"></i>
                        <span>Secure & encrypted</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function togglePassword(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + '-eye');
    if (field.type === 'password') {
        field.type = 'text';
        if (icon) icon.setAttribute('data-lucide', 'eye-off');
    } else {
        field.type = 'password';
        if (icon) icon.setAttribute('data-lucide', 'eye');
    }
    if (typeof lucide !== 'undefined' && lucide.createIcons) {
        lucide.createIcons();
    }
}

// Form validation
document.getElementById('registerForm').addEventListener('submit', function(e) {
    var p = document.getElementById('password').value;
    var r = document.getElementById('retype_password').value;
    if (p !== r) {
        e.preventDefault();
        alert('Passwords do not match.');
        return false;
    }
});
</script>
{% endblock %}