<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- Responsive Meta Tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS for BrighterTrades -->
    <link rel="stylesheet" href="{{ url_for('static', filename='brighterStyles.css') }}">

    <title>{{ title }} | BrighterTrades</title>
    <link rel="icon" href="{{ url_for('static', filename='brightertrades_favicon.ico') }}" type="image/x-icon">

    <!-- Google Fonts for Modern Typography -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

    <!-- Font Awesome for Icons -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

    <!-- AOS (Animate On Scroll) CSS for Animations -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">

    <!-- Custom JavaScript (Deferred) -->
    <script src="{{ url_for('static', filename='user.js') }}" defer></script>
</head>
<body class="bg-dark text-light">
    <!-- Background Animation -->
    <div class="bg-animation"></div>

    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8">
                <!-- Signup Card -->
                <div class="card bg-transparent border-0" data-aos="fade-up" data-aos-duration="1000">
                    <div class="card-body p-4">
                        <!-- BrighterTrades Logo -->
                        <div class="text-center mb-4">
                            <img src="{{ url_for('static', filename='logo_BrighterTrades.webp') }}" alt="BrighterTrades Logo" class="img-fluid logo" style="max-width: 150px; margin-top: 20px;">
                        </div>

                        <h2 class="card-title text-center mb-4">Join BrighterTrades</h2>

                        <!-- Flash Messages - Only show signup-related messages -->
                        {% with messages = get_flashed_messages(with_categories=true) %}
                            {% if messages %}
                                {% for category, message in messages %}
                                    {% if category in ['signup_error', 'error', 'message'] %}
                                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                            <i class="fas fa-exclamation-circle me-2"></i>{{ message }}
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                    {% elif category == 'success' %}
                                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                                            <i class="fas fa-check-circle me-2"></i>{{ message }}
                                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                        </div>
                                    {% endif %}
                                    {# Ignore login_error and other unrelated categories #}
                                {% endfor %}
                            {% endif %}
                        {% endwith %}

                        <!-- Signup Form -->
                        <form id="signup_form" name="signup_form" action="/signup_submit" method="post" novalidate>
                            <!-- Username Field -->
                            <div class="mb-3">
                                <label for="username" class="form-label">User Name</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    <input type="text" class="form-control" id="username" name="user_name" placeholder="Enter your user name" required>
                                    <div class="invalid-feedback">
                                        Please enter a user name.
                                    </div>
                                </div>
                            </div>

                            <!-- Email Field -->
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required>
                                    <div class="invalid-feedback">
                                        Please enter a valid email address.
                                    </div>
                                </div>
                            </div>

                            <!-- Password Field -->
                            <div class="mb-4">
                                <label for="password" class="form-label">Password</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                    <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password"
                                        pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                        title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                                        required>
                                    <div class="invalid-feedback">
                                        Password must be at least 8 characters long and include at least one number, one uppercase letter, and one lowercase letter.
                                    </div>
                                </div>
                                <small class="form-text text-muted">
                                    Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
                                </small>
                            </div>

                            <!-- Submit Button -->
                            <button type="submit" class="btn btn-primary w-100 py-2">
                                <i class="fas fa-arrow-right me-2"></i> Sign Up
                            </button>
                        </form>

                        <!-- Divider -->
                        <hr class="my-4 text-light">

                        <!-- Social Signup Options (Coming Soon) -->
                        <div class="text-center">
                            <p class="mb-2 text-muted"><small>Social login coming soon</small></p>
                            <button class="btn btn-outline-secondary btn-floating mx-1" disabled title="Coming soon"><i class="fab fa-google"></i></button>
                            <button class="btn btn-outline-secondary btn-floating mx-1" disabled title="Coming soon"><i class="fab fa-github"></i></button>
                        </div>

                        <!-- Link to Login Page -->
                        <p class="mt-4 text-center">
                            Already have an account? <a href="/login" class="text-primary">Log in here</a>.
                        </p>
                    </div>
                </div>
                <!-- End of Signup Card -->
            </div>
        </div>
    </div>

    <!-- AOS (Animate On Scroll) JS for Animations -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        // Initialize AOS
        AOS.init({
            offset: 100, // Adjust the distance to start the animation (default: 120px)
            duration: 600, // Reduce animation duration (default: 400ms)
            easing: 'ease-out-cubic', // Use a smoother easing function
            anchorPlacement: 'top-center', // Adjust the trigger point for the animation
        });
    </script>

    <!-- Bootstrap 5 JS and Dependencies (Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-..." crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-..." crossorigin="anonymous"></script>

    <!-- Custom JavaScript for Form Validation -->
    <script>
        // Example JavaScript for Disabling Form Submissions if There Are Invalid Fields
        (function () {
            'use strict'

            // Fetch the Signup Form
            var form = document.getElementById('signup_form')

            // Add a 'submit' Event Listener
            form.addEventListener('submit', function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault()
                    event.stopPropagation()
                }
                form.classList.add('was-validated')
            }, false)
        })()
    </script>
</body>
</html>

<style>

/* brighterStyles.css */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* Global Styles */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #121212;
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
    padding-top: 80px; /* Adds space to prevent sliding too far */

}

/* Background Animation */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('{{ url_for('static', filename='images/trading-bg.jpg') }}') no-repeat center center fixed;
    background-size: cover;
    filter: brightness(0.5);
    z-index: -1;
}

/* Card Styles */
.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
}

/* Input Group Styles */
.input-group-text {
    background-color: #1f1f1f;
    border: none;
    color: #e0e0e0;
}

/* Button Styles */
.btn-primary {
    background-color: #0d6efd;
    border: none;
    transition: background-color 0.3s ease;
    height: 40px;
}

.btn-primary:hover {
    background-color: #0b5ed7;
}

/* Social Buttons */
.btn-outline-light {
    color: #e0e0e0;
    border-color: #e0e0e0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-light:hover {
    background-color: #e0e0e0;
    color: #121212;
}

/* Footer Link */
a.text-primary {
    color: #0d6efd !important;
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .card-body {
        padding: 2rem;
    }

    .btn-primary {
        padding: 0.75rem;
    }
}
    /* Center the logo and ensure proper spacing */
.logo {
    display: block;
    margin: 0 auto; /* Center horizontally */
    max-height: 100px; /* Prevent the logo from being too large */
    margin-top: 20px; /* Add space from the top */
}

/* Optional: Add spacing for mobile responsiveness */
@media (max-width: 576px) {
    .logo {
        max-height: 80px;
        margin-top: 10px;
    }
}
    /* Adjust the AOS fade-up animation */
[data-aos="fade-up"] {
    transform: translateY(20px); /* Move only 20px upwards */
}

[data-aos="fade-up"].aos-animate {
    transform: translateY(0); /* Reset to the original position after animation */
}
.container {
    margin-top: 50px; /* Ensures the container doesn't slide out of view */
}
</style>
