<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>eCommerce</title>
    <link href="../static/css/ecom.css" rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head>
<body>
    <nav th:replace="fragments/header :: header">Header</nav>
    <main>
        <div class='hero'>
            <div class='content-width'>
                <h1>Angebote</h1>
                <div class='grid m base shadow'>

                    <section>
                        <img th:src="@{/img/product-1.jpg}" />
                        <h2>Lorem Ipsum</h2>
                        <p class='price'> 25.14 €</p>
                        <p>
                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
                        </p>
                    </section>

                    <section>
                        <img th:src="@{/img/product-2.jpg}" />
                        <h2>Lorem Ipsum</h2>
                        <p class='price'> 10.14 €</p>
                        <p>
                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
                        </p>
                    </section>

                    <section>
                        <img th:src="@{/img/product-4.jpg}" />
                        <h2>Lorem Ipsum</h2>
                        <p class='price'> 25.14 €</p>
                        <p>
                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
                        </p>
                    </section>

                    <section>
                        <img th:src="@{/img/product-5.jpg}" />
                        <h2>Lorem Ipsum</h2>
                        <p class='price'> 10.14 €</p>
                        <p>
                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.
                        </p>
                    </section>

                    <section>
                        <img th:src="@{/img/product-3.jpg}" />
                        <h2>Lorem Ipsum</h2>
                        <p class='price'> 44.14 €</p>
                        <p>

                            Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte.

                        </p>
                    </section>

                    <section class="spacer"></section>
                    <section class="spacer"></section>
                    <section class="spacer"></section>
                    <section class="spacer"></section>
                </div>
            </div>
            <div class="vertical-spacer s"></div>
        </div>
        <!-- TODO only shown if not logged in-->
        <div class=''>
            <div class='content-width'>
                <h1>Personalisierte Empfehlungen</h1>
                <div class="grid l">
                    <img th:src="@{/img/undraw_successful_purchase_secondary.svg}" />
                    <div>
                        <h2>Werde jetzt Kunde</h2>
                        <p> Jetzt Kunde werden und viele Vorteile sichern,
                            wie z.B. personalisierte Empfehlungen. </p>
                        <p>
                            <a class="button" th:href="@{/register}">Registieren</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="vertical-spacer s"></div>
        </div>
    </main>
    <footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>
