<!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" 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>
   <main class="sidebar-layout content-width">
      <nav th:replace="fragments/employee :: sidebar">Header</nav>
      <div class="content-width">
         <h1> Gelistete Artikel </h1>

         <!--
         ArticleListing (
             article : Article
             pricePerUnitNetCent : int
             unitsPerWarehouseSlot : int

             title : String
             description : String
             tags : Tag[]
             image : Blob
         )

         Article (
            manufacturer : string
            articleId    : string
            vatPercent   : int
         )
         -->
         <h2>Artikel bearbeiten</h2>
         <form class="formgrid">
            <p class="m">
               <label for="title">Titel</label>
               <input class="linestyle full-width" type="text" name="title" value="Kamera" />
            </p>
            <p class="s">
               <label for="ref-article">Refernzierter Artikel</label>
               <input class="linestyle full-width" type="text" name="ref-article" value="A-8405" disabled />
            </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="linestyle" type="number" step="0.01" name="price" value="84.45" /> EUR
                  ( 19% Mwst. )
                  <!-- Info von article ref--> <br />
                  = 105.98 EUR Brutto
               </p>
               <p>
                  <label for="max-price-buy">Maximaler Einkaufspreis (Netto)</label>
                  <input class="linestyle" type="number" step="0.01" name="price" value="80.98" /> EUR
               </p>
               <p>
                  <fieldset>
                     <label for="is-active">Nachkaufen</label>
                     <input type="radio" id="mc" name="is-active" value="true" checked> Automatisch nachbestellen
                     <input type="radio" id="mc" name="is-active" value="false"> Nicht mehr nachkaufen
                  </fieldset>
               </p>
            </div>

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

            <div class="s">
               <p>
                  <label for="price">Einheiten pro Lagherplatz</label>
                  <input class="linestyle" type="number" name="units-per-slot" value="20" />
               </p>
               <p>
                  Der Wert wird nur für zukünftige Lagerbuchungen verwendet.
                  Bei Problemen kann können Einheiten aus und wieder eingebucht werden.
                  <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>
