<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        .navbar {
            background: darkkhaki;
        }

        span {
            color: #b2d7ff;
            text-decoration: none;
            background: transparent;
        }

        ul {
            text-align: justify;
            margin-left: 50px;
            margin-right: 50px;

        }

        body {
            background-image: url("https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=869&q=80");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center top -150px; /* Adjust the background position to move the image up */
        }

        .navbar-brand {
            color: #343a40;
            font-weight: bold;
        }

        .nav-link {
            color: #343a40;
            font-weight: bold;

        }

        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #111;
            height: auto;
            width: 100vw;
            padding-top: 40px;
            color: #fff;
        }

        .footer-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            height: 80px;
        }

        .footer-content h3 {
            font-size: 2.1rem;
            font-weight: 500;
            text-transform: capitalize;
            line-height: 3rem;
            margin-top: 20px;
        }

        .footer-content p {
            max-width: 500px;
            margin: 10px auto;
            line-height: 28px;
            font-size: 14px;
            color: #cacdd2;
        }

        .socials {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem 0 3rem 0;
        }

        .socials li {
            margin: 0 10px;
        }

        .socials a {
            text-decoration: none;
            color: #fff;
            border: 1.1px solid white;
            padding: 5px;
            border-radius: 50%;
        }

        .socials a i {
            font-size: 1.1rem;
            width: 20px;
            transition: color .4s ease;
        }

        .socials a:hover i {
            color: aqua;
        }

        .footer-bottom p {
            float: left;
            font-size: 14px;
            word-spacing: 2px;
            text-transform: capitalize;
        }

        .footer-bottom p a {
            color: #44bae8;
            font-size: 16px;
            text-decoration: none;
        }

        .footer-bottom span {
            text-transform: uppercase;
            opacity: .4;
            font-weight: 200;
        }

        .footer-menu ul {
            display: flex;
        }

        .footer-menu ul li {
            padding-right: 10px;
            display: block;
        }

        .footer-menu ul li a {
            color: #cfd2d6;
            text-decoration: none;
        }

        .footer-menu ul li a:hover {
            color: #27bcda;
        }

        @media (max-width: 500px) {
            .footer-menu ul {
                display: flex;
                margin-top: 10px;
                margin-bottom: 20px;
            }
        }

        .kopce {
            background-color: mediumslateblue;
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin-left: 20px;
        }

        /*#logo{*/
        /*    width:160px;*/
        /*    height: 60px*/
        /*}*/

        h1 {
            color: black;
            font-size: 60px;
            font-weight: 700;
            letter-spacing: 8px;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            position: relative;
            animation: text 3s 1;
        }

        @keyframes text {
            0% {
                color: black;
                margin-bottom: -40px;
            }
            30% {
                letter-spacing: 25px;
                margin-bottom: -40px;
            }
            85% {
                letter-spacing: 8px;
                margin-bottom: -40px;
            }
        }

        footer {
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        #signUpText{
            color: white;
            font-weight: 500;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8"/>
    <title>Sign Up</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>

<body>
<div>
    <nav class="navbar navbar-expand-md ">
        <div class="container">
            <!--                    <img class="u-image u-image-default u-image-1" src="../static/logoeventra.png" alt="" data-image-width="648" data-image-height="292">-->
            <!--                <a class="navbar-brand" href="/home"></a>-->
            <a class="navbar-brand"> Eventrra</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
                    aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarsExampleDefault">
                <ul class="navbar-nav m-auto">

                    <li th:if="${session.user!=null}" class="nav-item m-auto">
                        <a class="nav-link active" href="/">Home</a>
                    </li>

                    <li th:if="${session.user!=null and session.role == 'ROLE_CLIENT'}"
                        class="nav-item m-auto">
                        <a class="kopce" href="/host_event">Host an event</a>
                    </li>
                    <li th:if="${session.user!=null}" class="nav-item m-auto">
                        <a class="nav-link active" href="/my_events">Scheduled events</a>
                    </li>
                </ul>

                <form class="form-inline my-2 my-lg-0">

                    <div th:if="${session.user==null}">
                        <a class="btn btn-light btn-sm ml-3" href="/login">
                            Login
                        </a>

                        <a class="btn btn-light btn-sm ml-3" href="/register">
                            Sign up
                        </a>
                    </div>
                    <div style="text-align: center" th:if="${session.user!=null}" class="nav-item m-auto">
                        <a th:text="${session.user.username}" style="color:white; font-size: 20px;"
                           class="nav-link active" href="/login/profile"></a>
                    </div>

                    <div th:if="${session.user!=null}">
                        <a class="btn btn-light btn-sm ml-3" href="/logout">
                            Log out
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </nav>
</div>
    <br>
    <form th:method="POST" th:action="@{/register}">
        <div class="container">
            <form class="form-signin mt-xl-5" method="post" action="/register">
                <h2 class="form-signin-heading" id="signUpText">Register</h2>
                <p>
                    <label for="name" class="sr-only">Name</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Name" required="" autofocus="">
                </p>
                <p>
                    <label for="username" class="sr-only">Username</label>
                    <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="" autofocus="">
                </p>
                <p>
                    <label  class="sr-only">Phone number</label>
                    <input type="text" id="phone" name="number" class="form-control" placeholder="Phone" required="" autofocus="">
                </p>
                <p>
                    <label for="password" class="sr-only">Password</label>
                    <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
                </p>
                <p>
                    <label for="rpassword" class="sr-only">Repeat Password</label>
                    <input type="password" id="rpassword" name="rpassword" class="form-control" placeholder="Repeat Password" required="">
                </p>
                <p>
                    <label for="role" class="sr-only">
                        Choose a role
                    </label>
                    <select class="form-control" id="role" name="role" required>
                        <option value="client">Client</option>
                        <option value="band">Band</option>
                        <option value="photographer">Photographer</option>
                        <option value="waiter">Waiter</option>
                        <option value="catering">Catering Company</option>
                    </select>
                </p>

                <div th:if="${hasError}">
                    <div th:text="${error}" class="text-danger"></div>
                </div>
            </form>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign up</button>
        </div>
    </form>
    <br>
    <a href="/login" class="btn btn-lg btn-block btn-light">Already have an account? Login here!</a>
</body>
</html>