<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75, user-scalable=no">

    <title>Meine Bestellungen</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>

<div class="sidebar-layout content-width">
    <nav></nav>
    <div>
        <h1>Meine Bestellungen</h1>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/customer :: sidebar"></nav>
    <div class="content-width detailflex">
        <div th:each="order: ${orders}">
            <h2 id="20202701" th:text="|Bestellung vom ${order.formatCreated()}" />
            <div>
                <table class="key-value">
                    <tr>
                        <th>Lieferstatus</th>
                        <td  th:if="${order.deliveredAt == null}"><b>Unterwegs</b> <br/> Vorraussichtliche Ankunft: <span th:text="${order.getEstimatedArrival()}" /></td>
                        <td  th:if="${order.deliveredAt != null}"><b>Angekommen</b> <br/> Ankunft: <span th:text="${order.formatDeliveredAt()}" /></td>
                    </tr>
                    <tr>
                        <th>Sendeverfolgungsnummer</th>
                        <td th:text="${order.trackingId}"></td>
                    </tr>
                    <tr>
                        <th></th>
                        <td th:text="${order.destination.toString()}" />
                    </tr>
                </table>
            </div>
            <table>
                <tr>
                    <th>Bild</th>
                    <th>Name</th>
                    <th>Menge</th>
                    <th>Preis (Brutto)</th>
                </tr>
                <tr th:each="position: ${order.positions}">
                    <td><a th:href="@{/shop/articles/{id}(id = ${position.article.id})}"><img th:src="@{/shop/articles/{id}/image.jpg(id=${position.article.id})}" class="s"/></a></td>
                    <td><a th:href="@{/shop/articles/{id}(id = ${position.article.id})}" th:text="${position.article.title}" class="s"></a></td>
                    <td th:text="${position.quantity}" />
                    <td th:text="${#numbers.formatDecimal(position.getSumPrice() * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Position</th>
                    <th>Preis</th>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Artikel (Netto)</td>
                    <td th:text="${#numbers.formatDecimal(order.totalNetCent * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>Umsatzsteuer</td>
                    <td th:text="${#numbers.formatDecimal(order.totalVatCent * 0.01, 1, 'POINT', 2, 'COMMA')}" />
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>
                        <h3>Gesammtpreis</h3>
                    </td>
                    <td>
                        <h3 th:text="${#numbers.formatDecimal(order.totalGrossCent * 0.01, 1, 'POINT', 2, 'COMMA')}"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
