<!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 header' th:fragment="header">
    <div class='content-width bar-flex'>
        <a class="button no-padding" href="/"><img class="logo" th:src="@{/img/ecom-logo-base.svg}"></a>
        <form class='spacer input-icon secondary' th:action="@{/shop/search}" method="GET">
            <input type="text" name="term" placeholder="Nach Produkten suchen..."/>
            <button>Finden</button>
        </form>
        <a th:unless="${user}" class="button" th:href="@{/login}">Login</a>
        <div th:if="${user}" class="dropdown">
            <a class="dropdown-button button">Mein Konto</a>
            <div class="dropdown-content">
                <a class="black button" th:href="@{/user/}">Einstellungen</a>
                <a class="black button" th:href="@{/user/orders/}">Meine Bestellungen</a>
                <form th:if="${user}" method="post" th:action="@{/logout}" class="no-margin">
                    <button class="bg-black no-margin full-width">Abmelden</button>
                </form>
            </div>
        </div>
        <a class="button" th:href="@{/shop/checkout}">Warenkorb (<span th:text="${shoppingCart.itemCount}"></span>)</a>
    </div>
    <div th:if="${error}" class="error" id="error-msg">
        <div class="content-width bar-flex">
            <div th:text="${error}" class="spacer error">
                Error
            </div>
            <div class="">
                <script>
                  function toggle(id) {
                     document.getElementById(id).classList.toggle("invisible");
                  }
                </script>
                <a class="secondary button error" href="javascript:void(0)" onclick="toggle('error-msg');">X</a>
            </div>
        </div>
    </div>
    <div th:if="${info}" class="info" id="info-msg">
        <div class="content-width bar-flex">
            <div th:text="${info}" class="spacer info">
                Info
            </div>
            <div class="">
                <script>
                  function toggle(id) {
                     document.getElementById(id).classList.toggle("invisible");
                  }
                </script>
                <a class="secondary button info" href="javascript:void(0)" onclick="toggle('info-msg');">X</a>
            </div>
        </div>
    </div>
</nav>
</body>
</html>
