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

<head>
    <meta charset="utf-8">
    <title>Checkout</title>
    <link rel="stylesheet" th:href="@{/css/ecom.css}"/>
    <link rel="stylesheet" th:href="@{/css/listedArticles.css}"/>
    <script th:src="@{/js/filterTable.js}"></script>

</head>

<body>
<nav th:replace="fragments/header :: header">Header</nav>
<div class="sidebar-layout content-width">
    <div>
        <h1>Warenkorb</h1>

        <script th:src="@{/js/back.js}"></script>
        <p class="back" data-group="shop" data-insert="true"></p>
    </div>
    <nav></nav>
</div>
<main class="content-width sidebar-layout" style="min-height: 100vh;">
    <div style="max-width: 45em; width: 100%;">
        <table>
            <tr>
                <th>Bild</th>
                <th>Name</th>
                <th>Preis (Brutto)</th>
                <th>Menge</th>
                <th></th>
            </tr>
            <tr>
                <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-1.jpg}" class="s"/><a/></td>
                <td><a th:href="@{/shop/articles/4151}">Kamera<a/></td>
                <td>100,50&nbsp;EUR</td>
                <td>
                    <select size="1">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
                <td>
                    <button class="small">Entfernen</button>
                </td>
            </tr>
            <tr>
                <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-2.jpg}" class="s"/><a/></td>
                <td><a th:href="@{/shop/articles/4151}">Earbuds<a/></td>
                <td>63,95&nbsp;EUR</td>
                <td>
                    <select size="1">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
                <td>
                    <button>Entfernen</button>
                </td>
            </tr>
            <tr>
                <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-3.jpg}" class="s"/><a/></td>
                <td><a th:href="@{/shop/articles/4151}">USB-Magic Light<a/></td>
                <td>11,90&nbsp;EUR</td>
                <td>
                    <select size="1">
                        <option value="1">1</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
                <td>
                    <button>Entfernen</button>
                </td>
            </tr>
            <tr>
                <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-4.jpg}" class="s"/><a/></td>
                <td><a th:href="@{/shop/articles/4151}">3D Magic Stativ<a/></td>
                <td>15,99&nbsp;EUR</td>
                <td>
                    <select size="1">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5" selected>5</option>
                    </select>
                </td>
                <td>
                    <button>Entfernen</button>
                </td>
            </tr>
            <tr>
                <td><a th:href="@{/shop/articles/4151}"><img th:src="@{/img/product-5.jpg}" class="s"/><a/></td>
                <td><a th:href="@{/shop/articles/4151}">Ersatzfernbedinung<a/></td>
                <td>7,95&nbsp;EUR</td>
                <td>
                    <select size="1">
                        <option value="1" selected>1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </td>
                <td>
                    <button>Entfernen</button>
                </td>
            </tr>
        </table>
    </div>
    <form method="POST" th:action="@{/shop/checkoutFinish}" style="min-width: 30em; max-width: 45em;">
        <div class="detailflex hero">
            <div>
                <h1>Checkout</h1>
            </div>
            <div th:if="${user}">
                <h2>Lieferadresse:</h2>
                <textarea rows="5" class="full-width" type="text" name="address"
                          placeholder="Optional: Zusatz&#10;Optional: Unternehmen&#10;Straße Hausnummer&#10;Postleitzeit Ort&#10;Land">
Max Mustermann
Musterstraße 42
42424 Mustertal
               </textarea>
            </div>
            <div th:if="${user}">
                <h2>Zahlung:</h2>
                <fieldset>
                    <input type="radio" name="type" value="priv" id="payment-card" required checked>
                    <label for="payment-card">Kartenzahlung</label> <br/>
                    <input class="full-width" type="text" id="cardnumber" name="cardnumber" placeholder="Kartennummer"
                           required/>
                </fieldset>
                <fieldset>
                    <input class="" type="checkbox" id="bonus" name="bonus" checked/>
                    <label for="bonus"><h3>10 gesammelte Bonuspunkte verwenden</h3></label>
                </fieldset>
            </div>
            <div>
                <h2>Bestellübersicht</h2>
                <!-- Dirty  TODO: -->
                <table>
                    <tr>
                        <th>Artikel (Netto)</th>
                        <th>200,29&nbsp;EUR</th>
                    </tr>
                    <tr th:if="${user}">
                        <th>Bonuspunkte</th>
                        <th>-5,00&nbsp;EUR</th>
                    </tr>
                    <tr>
                        <th>Umsatzsteuer (19%)</th>
                        <th>35,00&nbsp;EUR</th>
                    </tr>
                    <tr>
                        <th>Umsatzsteuer (7%)</th>
                        <th>2,50&nbsp;EUR</th>
                    </tr>
                    <tr class="secondary">
                        <th>Gesamt:</th>
                        <th>240,79&nbsp;EUR</th>
                    </tr>
                    <tr th:if="${user}" class="secondary">
                        <th colspan="2" class=" no-padding"></th>
                    </tr>
                </table>
            </div>
            <div th:if="${user}">
                <button class=" no-margin secondary full-width">jetzt kostenpflichtig bestellen</button>
            </div>
            <div th:unless="${user}">
                <a th:href="@{/login}" class="button secondary no-margin full-width">Einloggen und forfahren.</a>
            </div>
        </div>
    </form>
</main>
<footer th:replace="fragments/footer :: footer"></footer>

</body>

</html>
