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

<head>
    <%- include('./components/head'); %>
</head>

<body>
    <div class="container">
        <div class="row p-2 min-vh-100 align-items-center">
            <div class="col-md-8 col-lg-6 col-xl-4 mx-auto">
                <div class="p-3 d-flex flex-column gap-3">
                    <h1 class="text-center">Register</h1>

                    <!-- Testing only notice -->
                    <div class="alert alert-warning m-0" role="alert">
                        This is a test version of the site available for demonstration purposes only. Please do not use real data. All user-generated content may be deleted at any time without further notice.
                    </div>

                    <% if (messages.success) { %>
                        <div class="alert alert-success alert-dismissible fade show m-0 text-start" role="alert">
                            <%= messages.success %>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Reject"></button>
                        </div>
                    <% } %>
                    <% if (messages.error) { %>
                        <div class="alert alert-danger alert-dismissible fade show m-0 text-start" role="alert">
                            <%= messages.error %>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Reject"></button>
                        </div>
                    <% } %>
                    <form class="d-flex flex-column gap-4" action="/account/register" method="post">
                        <div class="form-floating">
                            <input name="email" type="email" placeholder="Email" class="form-control"
                                id="floatingEmail" required>
                            <label for="floatingEmail">Email</label>
                        </div>
                        <div class="form-floating">
                            <input name="password" type="password" placeholder="Password" class="form-control"
                                id="floatingPassword" required>
                            <label for="floatingPassword">Password</label>
                        </div>
                        <button type="submit" class="btn btn-dark w-100">Register</button>
                    </form>
                    <a href="/account/login" class="text-center text-secondary text-decoration-none">Use an existing account</a>
                </div>
            </div>
        </div>
    </div>

    <%- include('./components/foot'); %>
</body>

</html>