<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>eCommerce</title>
</head>
<body>
    <nav class='hero' th:fragment="header">
        <div class='content-width bar-flex'>
            <a class="button" href="/">Project eCommerce</a>
            <a class="button" href="/">Angebote</a>
            <form class='spacer input-icon secondary' th:action="@{/searchresults}" method="GET">
                <input type="text" placeholder="Nach Produkten suchen..."/>
                <button>Finden</button>
            </form>
            <a th:unless="${customer}" class="button" th:href="@{/login}">Login</a>
            <div class="notifications" th:if="${customer}" style="display: none;">
                <input id="messages" type="checkbox"></input>
                <label for="messages" class="button">
                    <img th:src="@{/img/bell.svg}" width="25" height="28" alt="Nachrichten"/>
                </label>
                <ul class="listbox">
                    <li class="unread">
                        Ihre Bestellung kommt voraussichtlich am Donnerstag, den 20.08.2020
                    </li>
                    <li class="unread">
                        Ihre Rücksendung ist bei uns eingegangen.
                    </li>
                    <li>
                        Ihre Bestellung wurde versandt.
                    </li>
                </ul>
            </div>
            <a th:if="${customer}" class="button" th:href="@{/logout}">Abmelden</a>
        </div>
    </nav>
</body>
</html>
