<!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>Bearbeiten: Artikel</title>
      <script th:src="@{/js/filterTable.js}"></script>
      <script th:src="@{/js/editViewUpdateTax.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>Artikel bearbeiten</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 ID <span th:text="${ArticleID.id}"></span></h2>
            <form class="detailgrid" action="#" th:action="@{/intern/articles/{id}/saveChanges(id = ${ArticleID.id})}" th:object="${ArticleID}" method="POST" enctype="multipart/form-data">
               <p class="m">
                  <label for="title">Titel</label>
                  <input class=" full-width" type="text" id="title" name="title" required="required" pattern=".+" th:value="${ArticleID.title}"/>
               </p>
               <p class="s">
                  <label for="ref_disabled">Refernzierter Artikel</label>
                  <input class="" type="text" id="ref_disabled" th:value="${ArticleID.offerID}" disabled/>
                  
                  <input type="hidden" id="ref_hidden" th:value="${ArticleID.offerID}" name="ref-article" />
                  
               <a th:href="${'/intern/supplierOffers/#q=' + ArticleID.id}">Details</a>
               </p>
               <div class="spacer"></div>
               <div class="m">
                  <p>
                     <label for="img">Bild Hochladen</label>
                     <input class="full-width" type="file" id="img" name="img"/>
                  </p>
                  <p>
                     <img th:src="@{/shop/articles/{id}/image.jpg(id=${ArticleID.id})}" class="m"/>
                  </p>
               </div>
               <div class="s">
                  <p>
                     <label for="price">Preis (Netto)</label>
                     <input class="" type="number" id="price" step="0.01" name="priceNet" required
                            th:value="${ArticleID.priceNet}"/>&nbsp;EUR <br/>
                     (<span th:text="${ArticleID.vatPercent}"></span>% Mwst.)
                     <input type="hidden" id="vatPercent" name="vatPercent" th:value="${ArticleID.vatPercent}"/>

                     <!-- Info von article ref--> <br/>
                     = <span id="priceGross" th:text="${ArticleID.price}"></span>&nbsp;EUR Brutto
                  </p>
                  <p>
                     <label for="reorderMaxPrice">Maximaler Einkaufspreis (Netto)</label>
                     <input class="" type="number" id="reorderMaxPrice" step="0.01" required name="reorderMaxPrice" th:value="${ArticleID.reorderMaxPrice}"/>&nbsp;EUR
                  </p>
                  <div>
                     <fieldset>
                        <input type="radio" name="autobuy" value="true" id="autobuy-yes" th:checked="${ArticleID.shouldReorder}" required>
                        <label for="autobuy-yes"> Automatisch nachbestellen.</label> <br/>
                        <input type="radio" name="autobuy" value="false" id="autobuy-no" th:checked="${!ArticleID.shouldReorder}" required>
                        <label for="autobuy-no"> Nicht mehr nachkaufen.</label> <br/>
                     </fieldset>
                  </div>
               </div>
               <div class="m">
                  <label for="categorie">Kategorien</label>
                  <p>
                     Bitte jede Kategorien in eine eigene Zeile
                  </p>
                  <textarea name="categorie" id="categorie" class="full-width" required rows="6" th:inline="text" th:field="${ArticleID.categorie}">

   </textarea>
               </div>
               <div class="s">
                  <p>
                     <label for="units-per-slot">Einheiten pro Lagerplatz</label>
                     <input class="" type="number" id="units-per-slot" required name="units-per-slot" th:value="${ArticleID.warehouseUnitsPerSlot}"/>                    
                  </p>
                  <p>
                     <b>Lagerbestand: <span th:text="${ArticleID.stock}"></span></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="/intern/warehouse/" class="button smaller">Lagerbuchung</a>
                  </p>
               </div>
               <p class="l">
                  <label for="description">Beschreibung</label>
 				<textarea name="description" id="description" class="full-width" required th:field="${ArticleID.description}" rows="15" th:inline="text">
                  </textarea>
               </p>
               <div class="l">
                  <button type="submit">Änderungen speichern</button>
                  <button type="reset">Zurücksetzen</button>
                  <button onclick="history.back()">Änderungen verwerfen</button>
               </div>
            </form>
         </div>
      </main>
      <footer th:replace="fragments/footer :: footer"></footer>
   </body>
</html>