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

<head>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <%- include("partials/header.ejs") %>
</head>

<body>
    <%- include("partials/loading.ejs") %>
        <div class="main">
            <div class="login">
                <img src="images/you.png" alt="teacher" width="800" height="500" id="sideImage">
                <div class="bgcontainer">
                    <div class="container">
                        <form id="form" method="POST" style="display:flex; flex-direction:column; align-items:center">
                            <div class="input-container logo">
                                <img src="images/logo.png" alt="TuteeTutor" height="50px" width="50px"
                                    style="border-radius: 10px;">
                                <h2 id="title">TuteeTutor</h2>
                            </div>
                            <% if (error) { %>
                                <div class="messageBlock">
                                    <p id="message">
                                        <%= error %>
                                    </p>
                                </div>
                                <% } %>
                                    <div>
                                        <div class="input-container inputs email">
                                            <div class="inline">
                                                <i class="fa-solid fa-envelope" style="color: #000000;"></i>
                                                <label for="email">Email</label>
                                            </div>
                                            <div class="holder-container">
                                                <input type="email" class="holder" id="email" name="email"
                                                    placeholder="Your Email here">
                                            </div>
                                        </div>
                                        <div class="input-container inputs username">
                                            <div class="inline">
                                                <i class="fa-solid fa-user" style="color: #000000;"></i>
                                                <label for="Username">Username</label>
                                            </div>
                                            <div class="holder-container">
                                                <input type="text" class="holder" id="username" name="username"
                                                    placeholder="Your username here">
                                            </div>
                                        </div>
                                        <div class="input-container inputs password">
                                            <div class="inline">
                                                <i class="fa-solid fa-lock" style="color: #000000;"></i>
                                                <label for="Password">Password</label>
                                            </div>
                                            <div class="holder-container">
                                                <input type="password" class="holder password" id="password"
                                                    name="password" placeholder="*********">
                                                <div id="eyecont"><i class="fa-solid fa-eye" id="eye"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-container inputs">
                                            <div class="inline">
                                                <i class="fa-solid fa-lock" style="color: #000000;"></i>
                                                <label for="Password">Confirm Password</label>
                                            </div>
                                            <div class="holder-container confirm-password">
                                                <input type="password" class="holder password" id="confirm-password"
                                                    name="confirmPassword" placeholder="*********">
                                            </div>
                                        </div>
                                        <div class="input-container">
                                            <button class="submit" id="submit" type="submit">Create Account</button>
                                        </div>

                                        <div class="signup">
                                            <p>Have an account?</p>
                                            <a href="/login">Login</a>
                                        </div>
                                    </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="javascripts/loading.js"></script>
        <script src="javascripts/visibility.js" type="module"></script>
</body>

</html>