<!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 Hinzufügen</h2>
         <p>
            Weitere Artikel können über Artikelübersicht gelistet werden.
            <a class="button smaller" th:href="@{/employee/articles}"> Jetzt Hinzufügen </a>
         </p>

         <p>
            <table id="main-table">
               <tr>
                  <th colspan="8">
                     <input type="text" placeholder="Filtern" class="smaller jsFilterTable full-width" data-target-id="main-table"></input>
                  </th>
               </tr>
               <tr>
                  <th>Bild</th>
                  <th>Name</th>
                  <th>Preis</th>
                  <th>(Netto)</th>
                  <th>Kategorien</th>
                  <th>Aktiv</th>
                  <th>Artikel</th>
                  <th>Id (bearbeiten)</th>
               </tr>

               <tr>
                  <td><img th:src="@{/img/product-1.jpg}" class="s" /></td>
                  <td>Kamera</td>
                  <td>100,50 €</td>
                  <td> (84.45 €) </td>
                  <td>Úberwachung, Elektronik</td>
                  <td><span class="checked"></span></td>
                  <td><a th:href="@{/employee/articles}">A-5051</a></td>
                  <td><a th:href="@{/employee/listedarticlesedit}">L-890</a></td>
               </tr>
               <tr>
                  <td><img th:src="@{/img/product-2.jpg}" class="s" /></td>
                  <td>Earbuds</td>
                  <td>63,95 €</td>
                  <td>(53,73 €)</td>
                  <td>Kopfhörer, Elektronik</td>
                  <td><span class="checked"></span></td>
                  <td><a th:href="@{/employee/articles}">A-840</a></td>
                  <td><a th:href="@{/employee/listedarticlesedit}">L-13850</a></td>
               </tr>
               <tr>
                  <td><img th:src="@{/img/product-3.jpg}" class="s" /></td>
                  <td>USB-Magic Light</td>
                  <td>11,90 €</td>
                  <td> (10,00 €) </td>
                  <td>Sonstiges, Elektronik</td>
                  <td><span class="unchecked"></span></td>
                  <td><a th:href="@{/employee/articles}">A-8401</a></td>
                  <td><a th:href="@{/employee/listedarticlesedit}">L-5784</a></td>
               </tr>
               <tr>
                  <td><img th:src="@{/img/product-4.jpg}" class="s" /></td>
                  <td>3D Magic Stativ</td>
                  <td>15,99 €</td>
                  <td> (13.44 €) </td>
                  <td>Úberwachung, Elektronik</td>
                  <td><span class="checked"></span></td>
                  <td><a th:href="@{/employee/articles}">A-2135</a></td>
                  <td><a th:href="@{/employee/listedarticlesedit}">L-4564</a></td>
               </tr>
               <tr>
                  <td><img th:src="@{/img/product-5.jpg}" class="s" /></td>
                  <td>Ersatzfernbedinung</td>
                  <td>7,95 €</td>
                  <td> (6.68 €) </td>
                  <td>Úberwachung, Elektronik</td>
                  <td><span class="checked"></span></td>
                  <td><a th:href="@{/employee/articles}">A-4565</a></td>
                  <td><a th:href="@{/employee/listedarticlesedit}">L-4566</a></td>
               </tr>
            </table>
            <p>
      </div>
   </main>
   <footer th:replace="fragments/footer :: footer"></footer>
</body>

</html>
