<!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>Gelistete Artikel</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>Gelisteter Artikel 8450</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">
        <h2>Gelisteter Artikel 8450</h2>
        <form class="detailgrid">
            <p class="m">
                <label for="title">Titel</label>
                <input class=" full-width" type="text" name="title" value="Kamera"/>
            </p>
            <p class="s">
                <label for="ref-article">Refernzierter Artikel</label>
                <input class="" type="text" name="ref-article" value="8405" disabled/>
            <td><a th:href="@{/intern/articles/#q=%2044048}">Details</a></td>
            </p>
            <div class="spacer"></div>
            <div class="m">
                <p>
                    <label for="img">Bild Hochladen</label>
                    <input class="full-width" type="file" name="img"/>
                </p>
                <p>
                    <img th:src="@{/img/product-1.jpg}" class="m"/>
                </p>
            </div>
            <div class="s">
                <p>
                    <label for="price">Preis (Netto)</label>
                    <input class="" type="number" step="0.01" name="price" value="84.45"/>&nbsp;EUR <br/>
                    (19% Mwst.)
                    <!-- Info von article ref--> <br/>
                    = 105.98&nbsp;EUR Brutto
                </p>
                <p>
                    <label for="max-price-buy">Maximaler Einkaufspreis (Netto)</label>
                    <input class="" type="number" step="0.01" name="price" value="80.98"/>&nbsp;EUR
                </p>
                <div>
                    <fieldset>
                        <input type="radio" name="autobuy" value="true" id="autobuy-yes" checked required>
                        <label for="autobuy-yes"> Automatisch nachbestellen.</label> <br/>
                        <input type="radio" name="autobuy" value="false" id="autobuy-no" required>
                        <label for="autobuy-no"> Nicht mehr nachkaufen.</label> <br/>
                    </fieldset>
                </div>
            </div>

            <div class="m">
                <label for="tags">Kategorien</label>
                <p>
                    Bitte jede Kategorien in eine eigene Zeile
                </p>
                <textarea name="tags" class="full-width" rows="6">
Überwachung
Elektronik
               </textarea>
            </div>

            <div class="s">
                <p>
                    <label for="price">Einheiten pro Lagerplatz</label>
                    <input class="" type="number" name="units-per-slot" value="20"/>
                </p>
                <p>
                    <b>Lagerbestand: 12</b>
                </p>
                <p>
                    Der Wert wird nur für zukünftige Lagerbuchungen verwendet.
                    Bei Problemen kann können Einheiten aus- und wieder eingebucht werden.
                    <!-- TODO: set link g-->
                </p>
                <p>
                    <a href="/todo" class="button smaller">Lagerbuchung</a>

                </p>
            </div>

            <p class="l">
                <label for="description">Beschreibung</label>
                <textarea name="description" class="full-width" rows="15">
Eine TOLLE Kamera
Jaja du denkst jetzt bestimmt: "Bei dem Preis kann sie gar nich sooo TOLL sein".
Aber glaub mir, sie is echt echt TOLL!
Indianerehrenwort!
               </textarea>
            </p>
            <div class="l">
                <button type="submit">Änderungen speichern</button>
                <button type="reset">Zurücksetzen</button>
            </div>
        </form>
    </div>
</main>
<footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
