{% extends "base.html" %}

{% block title %}Register{% endblock %}

{% block content %}
<div class="container" style="margin-top: calc(var(--navbar-height) + 2rem); max-width: 600px;">
    <div class="search-container">
        <h1 class="page-title" style="margin-bottom: 1rem;">Create an Account</h1>

        <form action="/register" method="POST" class="search-form" style="gap: 1rem;">
            <div class="search-field">
                <i class="fas fa-user"></i>
                <input type="text" name="first_name" placeholder="First Name" required />
            </div>

            <div class="search-field">
                <i class="fas fa-user"></i>
                <input type="text" name="last_name" placeholder="Last Name" required />
            </div>

            <div class="search-field">
                <i class="fas fa-user-circle"></i>
                <input type="text" name="username" placeholder="Username" required />
            </div>

            <div class="search-field">
                <i class="fas fa-envelope"></i>
                <input type="email" name="email" placeholder="Email" required />
            </div>

            <!-- Password -->
            <div class="password-wrapper">
                <i class="fas fa-lock"></i>
                <input type="password" name="password" id="reg-password-field" placeholder="Password" required />
                <i class="fa-solid fa-eye-slash toggle-password" id="toggle-reg-password"></i>
            </div>

            <!-- Confirm Password -->
            <div class="password-wrapper">
                <i class="fas fa-lock"></i>
                <input type="password" name="confirm_password" id="confirm-password-field" placeholder="Confirm Password" required />
                <i class="fa-solid fa-eye-slash toggle-password" id="toggle-confirm-password"></i>
            </div>

            <button type="submit" class="search-btn" style="width: 100%;">Register</button>
        </form>

        <p style="text-align: center; margin-top: 1rem; color: var(--text-light);">
            Already have an account? <a href="/login" style="color: var(--primary-color); font-weight: 600;">Login</a>
        </p>
    </div>
</div>

<script>
    const toggleRegPassword = document.getElementById("toggle-reg-password");
    const regPasswordField = document.getElementById("reg-password-field");

    const toggleConfirmPassword = document.getElementById("toggle-confirm-password");
    const confirmPasswordField = document.getElementById("confirm-password-field");

    toggleRegPassword.addEventListener("click", function () {
        const type = regPasswordField.getAttribute("type") === "password" ? "text" : "password";
        regPasswordField.setAttribute("type", type);
        this.classList.toggle("fa-eye-slash");
        this.classList.toggle("fa-eye");
    });

    toggleConfirmPassword.addEventListener("click", function () {
        const type = confirmPasswordField.getAttribute("type") === "password" ? "text" : "password";
        confirmPasswordField.setAttribute("type", type);
        this.classList.toggle("fa-eye-slash");
        this.classList.toggle("fa-eye");
    });
</script>
{% endblock %}