<!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>Artikelübersicht</title>
    <script th:src="@{/js/filterTable.js}"></script>
    <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 th:text="|Bestellung ${order.id}|"></h1>

        <script th:src="@{/js/back.js}"></script>
        <div class="back" data-group="intern" data-insert="true"></div>
    </div>
</div>
<main class="sidebar-layout content-width">
    <nav th:replace="fragments/intern :: sidebar"></nav>
    <div class="content-width">
        <div>
            <h2 th:text="| Bestellung vom ${order.created.toString().substring(0,10)}|"></h2>
            <div>
                <table class="key-value">
                    <tr>
                        <th>Nutzer</th>
                        <td><a th:href="@{/intern/customers/{id}(id=${order.customer.id})}" th:text="${order.customer.id}"></a></td>
                    </tr>
                    <tr>
                        <th>Lieferstatus</th>
                        <td th:if="${deliveryData.allOk()}"><span th:text="${deliveryData.getStatus()}" /></td>
                        <td th:if="${deliveryData.noTrackingID()}">Bestellung wurde elektronisch angekündigt</td>
                        <td th:if="${deliveryData.noData()}">DHL-Server ist gerade nicht erreichbar</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td  th:if="${order.deliveredAt == null && order.trackingId!=null && !deliveryData.noData()}">Vorraussichtliche Ankunft: <span th:text="${deliveryData.getEstimatedArrival()}" /></td>
                        <td  th:if="${order.deliveredAt == null && order.trackingId!=null && deliveryData.noData()}">Vorraussichtliche Ankunft: --:--:---- </td>
                        <td  th:if="${order.deliveredAt != null && order.trackingId!=null}"><b>Angekommen</b>  Ankunft: <span th:text="${deliveryData.getEstimatedArrival()}" /></td>
                    </tr>
                    <tr>
                        <th>Sendeverfolgungsnummer</th>
                        <td th:text="${order.trackingId!=null} ? ${order.trackingId} : 'Es wurde noch keine Sendungsnummer vergeben'"></td>
                    </tr>
                    <tr>
                        <th></th>
                        <td th:text="${order.destination.toString()}"></td>
                    </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>
                    <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>Gesamtpreis</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>
