<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>e-commerce</title>
    <link href="/css/ecom.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
<main class="detailgrid">
    <div class="l">
        <h1 class="center-text">Warenkorb</h1>
        <table>
            <tr>
                <th>Bild</th>
                <th>Name</th>
                <th>Preis</th>
                <th>Menge</th>
                <th></th>
            </tr>

            <tr>
                <td><img th:src="@{/img/product-1.jpg}" class="s"/></td>
                <td>Kamera</td>
                <td>100,50 €</td>
                <td>
                    <select size="1">
                        <option>1</option>
                    </select>
                </td>
                <td>
                    <button>löschen</button>
                </td>
            </tr>
            <tr>
                <td><img th:src="@{/img/product-2.jpg}" class="s"/></td>
                <td>Earbuds</td>
                <td>63,95 €</td>
                <td>
                    <select size="1">
                        <option>1</option>
                    </select>
                </td>
                <td>
                    <button>löschen</button>
                </td>
            </tr>
            <tr>
                <td><img th:src="@{/img/product-3.jpg}" class="s"/></td>
                <td>USB-Magic Light</td>
                <td>11,90 €</td>
                <td>
                    <select size="1">
                        <option>1</option>
                    </select>
                </td>
                <td>
                    <button>löschen</button>
                </td>
            </tr>
            <tr>
                <td><img th:src="@{/img/product-4.jpg}" class="s"/></td>
                <td>3D Magic Stativ</td>
                <td>15,99 €</td>
                <td>
                    <select size="1">
                        <option>1</option>
                    </select>
                </td>
                <td>
                    <button>löschen</button>
                </td>
            </tr>
            <tr>
                <td><img th:src="@{/img/product-5.jpg}" class="s"/></td>
                <td>Ersatzfernbedinung</td>
                <td>7,95 €</td>
                <td>
                    <select size="1">
                        <option>1</option>
                    </select>
                </td>
                <td>
                    <button>löschen</button>
                </td>
            </tr>
        </table>
        </p>
    </div>
    <div class="s">
        <h1 class="center-text">Checkout</h1>
        <div class="hero">
            <div class="leftspace">
                <h2>Bestellübersicht</h2>
                <p>Artikel: 200,29 €</p>
                <p>Lieferung: 5,00 €</p>
                <h2 class="secondarytext">Gesamt: 205,29 €</h2>

                <h2>Versandadresse:</h2>
                <p>Max Mustermann</p>
                <p>Musterstraße 42</p>
                <p>42424 Mustertal</p>

                <button class="secondary">kostenpflichtig bestellen</button>
            </div>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>