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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home page</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

    <link rel="icon" type="image/x-icon" href="https://i.imgur.com/FJvzFPT.png">

    <link rel="stylesheet" type="text/css" href="/styles/reset.css">
    <link rel="stylesheet" type="text/css" href="/styles/navbar.css">
    <link rel="stylesheet" type="text/css" href="/styles/forms.css">

    <script src="js/validation.js" defer></script>
</head>

<body>
    <%- include ("partials/header.ejs", {logged: logged}) %>
    <div class="form">
        <h1>Create an account</h1>
        <p>Already have an account? <a href="/login">Login</a></p>
        <%
            if (errors) {
                %>
                <ul>
                    <%
                for(let error of errors) {
                %>
                        <li style="color:red">
                            <%=error.message%>
                        </li>
                        <%
                }
                %>
                </ul>
                <%
            }
	    %>
                    <form action="/register" method="POST">
                        <label for="fname">First name:</label>
                        <input type="text" name="fname" id="fname" class="form-control" onblur="onFocusOut('fname')" onkeyup="onKeyUp('fname')">
                        <p id="messageFirstName" class="message">
                            <small>The name field is required.</small>
                        </p>
                        <label for="lname">Last name:</label>
                        <input type="text" name="lname" id="lname" class="form-control" onblur="onFocusOut('lname')" onkeyup="onKeyUp('lname')">
                        <p id="messageLastName" class="message">
                            <small>The name field is required.</small>
                        </p>
                        <label for="email">Email:</label>
                        <input type="email" name="email" id="email" class="form-control" onblur="onFocusOut('email')" onkeyup="onKeyUp('email')">
                        <p id="messageEmail" class="message">
                            <small>The email field is required.</small>
                        </p>
                        <p id="messageValidateRegexEmail" class="message">
                            <small>Please enter an valid email.</small>
                        </p>

                        <label for="username">Username:</label>
                        <input type="text" name="username" id="username" class="form-control" onblur="onFocusOut('username')" onkeyup="onKeyUp('username')">
                        <p id="messageUsername" class="message">
                            <small>The username field is required.</small>
                        </p>
                        <p id="messageValidateRegexUsername" class="message">
                            <small>Please enter an valid username.</small>
                        </p>


                        <label for="password">Enter password:</label>
                        <input type="password" name="password" id="password" class="form-control" onblur="onFocusOut('password')" onkeyup="onKeyUp('password')">
                        <p id="messagePassword" class="message">
                            <small>The password field is required.</small>
                        </p>
                        <p id="messagePasswordMin" class="message">
                            <small>The password field must contain more than 6 symbols.</small>
                        </p>
                        <label for="passwordConfirmation">Confirm password:</label>
                        <input type="password" name="passwordConfirmation" id="passwordConfirmation" class="form-control" onblur="onFocusOut('passwordConfirmation')" onkeyup="onKeyUp('passwordConfirmation')">
                        <p id="messagePasswordConfirmation" class="message">
                            <small>The confirm password field is required.</small>
                        </p>
                        <p id="messagePasswordNotConfirmed" class="message">
                            <small>The passwords are not equal.</small>
                        </p>

                        <button>Create account</button>
                    </form>
        </div>

</body>

</html>
