<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign up</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-..." crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-..."
        crossorigin="anonymous"></script>
    <style>
        .row {
            padding-top: 5%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow-X: hidden;
        }
    </style>
</head>

<body>
    <%- include('partials/navbar') %>
        <div class="row justify-content-md-center">
            <div class="col-lg-4 col-md-6 ">
                <div class="card text-center">
                    <div class="card-header"> sign up </div>
                    <div class="card-body">
                        <h5 class="card-title">Get started Today!</h5>
                        <form id="signupForm" method="post" action="signup">
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input class="form-control" id="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="Username" class="form-label">User Name</label>
                                <input class="form-control" id="username" required minlength="3">
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input class="form-control" id="phone" minlength="10" maxlength="10"
                                    pattern="^[0-9]{10}$" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input type="password" class="form-control" minlength="8" id="password" required>
                            </div>
                            <div class="mb-3">
                                <label for="age" class="form-label">Age</label>
                                <input class="form-control" id="age" required>
                            </div>
                            <div class="mb-3">
                                <label for="gender" class="form-label">Gender</label>
                                <input class="form-control" id="gender">
                            </div>

                            <button value="Submit" form="signupForm" type="submit"
                                class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                    <div class="card-footer text-muted"> WandrLust* </div>
                </div>
            </div>
        </div>
        <script>
        // var form = document.getElementById("signupForm");

        // var formData = {
        //     name: "",
        //     phone: 0,
        //     email: "",
        //     username: "",
        //     password: "",
        //     age: 0,
        //     gender : ""
        // }
        // const handleSubmit =async(event)=>{
        //     event.preventDefault()
        //     var name = document.getElementById("name").value;
        //     var phone = document.getElementById("phone").value;
        //     var email = document.getElementById("email").value;
        //     var username = document.getElementById("username").value;
        //     var password = document.getElementById("password").value;
        //     var age = document.getElementById("age").value;
        //     var gender = document.getElementById("gender").value;
        //     formData.name = name;
        //     formData.phone = phone;
        //     formData.email = email;
        //     formData.username = username;
        //     formData.password = password;
        //     formData.age = age;
        //     formData.gender = gender;
        //     console.log("FormData is as follows",formData);
        //     const response = await fetch("/signup",{
        //         method: "POST",
        //         headers: {
        //             "Content-type": "application/json"
        //         },
        //         body: JSON.stringify(formData)
        //     })
        // }
        // form.addEventListener("submit", handleSubmit);
        </script>
</body>

</html>