<!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>Pizzroni - Register</title>
    <link rel="stylesheet" href="/css/app.css" />
    <link rel="shortcut icon" href="/img/others/pizza.png" type="image/x-icon" />
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body style="background-color: white">
    <section class="cart-container mx-auto my-8">
        <nav class="navbar">
            <a href="/"><img src="/img/others/Pizzroni Logo.png" alt="" width="150px" class="logo"
                    style="filter: brightness(0)" /></a>
            <a href="" class="Home black-style" style="color: black">Home</a>
            <a href="/offers" class="Offers black-style" style="color: black">Offers</a>
            <% if(user) { %>
                <a href="/orders" class="Orders black-style" style="color: black">Orders</a>
                <a href="/logout" class="Login black-style" style="color: black">Logout</a>
                <% } else { %>
                    <a href="" class="Orders black-style" style="color: black">Register</a>
                    <a href="/login" class="Login black-style" style="color: black">Login</a>
                    <% } %>
                        <div class="cart black-style">
                            <a href="/cart"><img src="/img/others/cart_2.png" width="25px" alt="" /></a>
                        </div>
        </nav>

        <div class="w-1/4 mx-auto my-10 registration-container">
            <div class="bg-white shadow-md border border-gray-200 rounded-lg py-4 px-8 border-black-700">
                <form class="space-y-4" action="/register" method="POST">
                    <% if(messages.error) { %>
                        <span class="text-red-500 text-sm">
                            <%= messages.error %>
                        </span>
                        <% } %>
                            <div>
                                <label for="name" class="text-sm font-medium block mb-2">Name</label>
                                <input type="text" name="name" id="name"
                                    class="border-2 border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400 bg-white-600 h-10"
                                    placeholder="Your name" required="" />
                            </div>
                            <div>
                                <label for="email" class="text-sm font-medium block mb-2">Email</label>
                                <input type="email" name="email" id="email"
                                    class="border-2 border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400 bg-white-600 h-10"
                                    placeholder="Your email" required="" />
                            </div>
                            <div>
                                <label for="password" class="text-sm font-medium block mb-2">Password</label>
                                <input type="password" name="password" id="password" placeholder="Create a password"
                                    class="border-2 border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 placeholder-gray-400 bg-white-600 h-10"
                                    required="" />
                            </div>
                            <button type="submit"
                                class="w-full font-medium rounded-lg text-sm px-5 text-center h-10 reg-btn">
                                Register
                            </button>
                            <div class="text-sm font-medium text-black-300">
                                Already having an account?<a href="/login"
                                    class="text-blue-600 hover:underline mx-5">Login</a>
                            </div>
                </form>
            </div>

            <p class="mt-2 text-xs text-center text-slate-500 tracking-wider">
                2022 &#169;Pizzroni. All rights reserved 
            </p>
        </div>
    </section>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="../../js//app.js"></script>
</html>