<!DOCTYPE html>
<html lang="de" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>e-commerce</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="/css/ecom.css" rel="stylesheet"/>
    <link href="/css/searchResults.css" rel="stylesheet"/>
</head>
<body>
<nav th:replace="fragments/header :: header">Header</nav>
<main>
    <div class="hero">
        <div class="searchresults">
            <div class="row">
                <div class="sidebar col-2">
                    <h1>Kategorie</h1>
                    <ul>
                        <li><span>Aufnahmegeräte</span></li>
                        <li><span>Computer</span></li>
                        <li><span>Fernseher</span></li>
                        <li><span>Handys</span></li>
                        <li><span>Unterhaltungselektronik</span></li>
                        <li><span>Sonstiges</span></li>
                    </ul>
                </div>
                <div class="articlelist col-10">
                    <div class="row article">
                        <div class="col-3 articleimg">
                            <img src="/img/product-1.jpg" />
                        </div>
                        <div class="col-9 articledesc">
                            <h2>
                                <form action="/articleDetail" method="GET">
                                    <input type="submit" value="Tolle Kamera" class="articlelink">
                                </form>
                            </h2>
                            <h1> 25.14 €</h1>
                            <p>
                                Eine TOLLE Kamera <br>
                                Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein". <br>
                                Aber glaub mir, sie is echt echt TOLL! <br>
                                Indianerehrenwort!
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row article">
                        <div class="col-3 articleimg">
                            <img src="/img/product-2.jpg" />
                        </div>
                        <div class="col-9 articledesc">
                            <h2>
                                <form action="/articleDetail" method="GET">
                                    <input type="submit" value="Bluetooth Kopfhörer" class="articlelink">
                                </form>
                            </h2>
                            <h1> 10.14 €</h1>
                            <p>
                                Sind halt Kopfhörer ohne Kabel, mehr gibts da nich zu sagen.
                            </p>
                        </div>
                    </div>
                    <hr>
                    <div class="row article">
                        <div class="col-3 articleimg">
                            <img src="/img/product-3.jpg" />
                        </div>
                        <div class="col-9 articledesc">
                            <h2>
                                <form action="/articleDetail" method="GET">
                                    <input type="submit" value="???" class="articlelink">
                                </form>
                            </h2>
                            <h1> 44.14 €</h1>
                            <p>
                                Ich weiß selbst nich was das genau sein soll.<br>
                                Wenn dus willst kannst es gern haben, musst nur das Geld überweisen.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>
</html>