add some example templates

212256cc · M. Esat Akpunar · 32d48f57 · 212256cc · 212256cc · 212256cc
Commit 212256cc authored May 25, 2025 by M. Esat Akpunar
14 changed files
--- a/template-previewer/src/templates/1/invoice-data.json
+++ b/template-previewer/src/templates/1/invoice-data.json
+{
+  "company_name": "Your Company Name",
+  "company_street": "123 Company St.",
+  "customer_no": "000123",
+  "customer_street": "Customer Street 45",
+  "customer_email": "customer@example.com",
+  "customer_zipcode": "12345",
+  "customer_city": "Berlin",
+  "sales_doc_number": "INV-2025-001",
+  "doc_date": "10.04.2025",
+  "salesItemList": [
+    {
+      "position": "1",
+      "item_code": "ITEM-001",
+      "sales_item_open_quantity": "2",
+      "item_price": "19.99",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "7.60",
+      "total_price": "47.58",
+      "discount": "0.00"
+    },
+    {
+      "position": "2",
+      "item_code": "ITEM-002",
+      "sales_item_open_quantity": "1",
+      "item_price": "49.99",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "9.50",
+      "total_price": "59.49",
+      "discount": "0.00"
+    },
+    {
+      "position": "3",
+      "item_code": "ITEM-003",
+      "sales_item_open_quantity": "5",
+      "item_price": "10.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "9.50",
+      "total_price": "59.50",
+      "discount": "0.00"
+    },
+    {
+      "position": "4",
+      "item_code": "ITEM-004",
+      "sales_item_open_quantity": "3",
+      "item_price": "15.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "8.55",
+      "total_price": "53.55",
+      "discount": "0.00"
+    },
+    {
+      "position": "5",
+      "item_code": "ITEM-005",
+      "sales_item_open_quantity": "4",
+      "item_price": "8.50",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "6.45",
+      "total_price": "38.45",
+      "discount": "0.00"
+    },
+    {
+      "position": "6",
+      "item_code": "ITEM-006",
+      "sales_item_open_quantity": "2",
+      "item_price": "22.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "8.36",
+      "total_price": "52.36",
+      "discount": "0.00"
+    },
+    {
+      "position": "7",
+      "item_code": "ITEM-007",
+      "sales_item_open_quantity": "1",
+      "item_price": "80.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "15.20",
+      "total_price": "95.20",
+      "discount": "0.00"
+    },
+    {
+      "position": "8",
+      "item_code": "ITEM-008",
+      "sales_item_open_quantity": "10",
+      "item_price": "2.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "3.80",
+      "total_price": "23.80",
+      "discount": "0.00"
+    },
+    {
+      "position": "9",
+      "item_code": "ITEM-009",
+      "sales_item_open_quantity": "7",
+      "item_price": "7.50",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "9.98",
+      "total_price": "61.98",
+      "discount": "0.00"
+    },
+    {
+      "position": "10",
+      "item_code": "ITEM-010",
+      "sales_item_open_quantity": "3",
+      "item_price": "30.00",
+      "price_unit": "EUR",
+      "vat_rate": "19%",
+      "vat_amount": "17.10",
+      "total_price": "107.10",
+      "discount": "0.00"
+    }
+  ],
+  "sales_gross_amount": "577.61",
+  "total_amount": "487.25",
+  "sales_head_cash_discount_vat_amount": "90.36",
+  "payment_type_name": "Klarna"
+}
\ No newline at end of file
--- a/template-previewer/src/templates/1/invoice-template.html
+++ b/template-previewer/src/templates/1/invoice-template.html
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Lieferdokument</title>
+  <style>
+    @page {
+      size: A4;
+
+      @bottom-center {
+        content: element(bottom-center);
+        padding: 1mm;
+      }
+    }
+
+    #bottom-center {
+      position: running(bottom-center);
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      color: #000;
+      margin: 40px;
+    }
+
+    .header {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .logo {
+      width: 150px;
+      height: auto;
+    }
+
+    .address-block {
+      margin-top: 20px;
+    }
+
+    .section-title {
+      margin-top: 30px;
+      font-weight: bold;
+      border-bottom: 1px solid #000;
+      padding-bottom: 5px;
+    }
+
+    .positions-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+    }
+
+    .positions-table th,
+    .positions-table td {
+      border: 1px solid #ccc;
+      padding: 6px;
+      text-align: left;
+    }
+
+    .totals {
+      margin-left: 80px;
+      margin-top: 20px;
+      width: 100%;
+    }
+
+    .totals td {
+      padding: 4px;
+    }
+
+    .totals .label {
+      text-align: right;
+      font-weight: bold;
+    }
+  </style>
+</head>
+
+<body>
+  <p id="bottom-center">
+    Primal State Performance GmbH | Pappelallee 78/79 | 10437 Berlin | hello@glow25.de | www.glow25.de<br />
+    USt-IdNr. DE315769117 | Amtsgericht Charlottenburg, HRB 192319 B Berlin<br />
+    Geschäftsführer: Rafael Frenk, Nicolas Martin | St.-Nr. 37/479/52242
+  </p>
+  <div class="header">
+    <div>
+      <div><strong>${company_name!""}</strong></div>
+      <div>${company_street!""}</div>
+    </div>
+    <div>
+      <img alt=""
+        src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAB3AWMDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD2aiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooATNFY954isrW/gsUfzriWVYyqHhMkDJP49P5VsUk09gFooopgFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFACUUVVv72LTrKW7mJ2RDJA6nsAPqaTdgJLicW0DSmKWTH8MSlmP0FcL4h8S6s8htTBJp8bDO05EjLyMk+nB6frWpYeOYrq9SCe0MKSMFVxJuwT0yMCsnx0xOux+1uuP8AvpqwqS5o3iy4qz1RlaCA2vWOef8ASFP616vXlfhwA+ILLIz+9FeqUUPhYT3FoooroICiq8l7aQNtluoUPo8gB/U1JHNHMu6ORXX1UgildASUUUUwCiiigAooooAKKKKAKd3qdjYMq3V1FEzcgM2CfwqeKaO4iEsMiyIwyGUgg/jXm3iyGeLxBcNOrBXIaNj0YYAGPp0rb+H7TGK9QsfJDKVB7Mc5x+AH6ViqrcuWxbjaNzsqKxvEFxfLHb2mnK6y3Um1pQpIjXjJJ7df51jatp83h2CHUbXUrmWYShWSV9yyZzkY/D3qnK3QlK52VFc94ovWX7Jp0Vx9na5k3SSh9mxF6nPb/wCsafY6JaNJHdW+sX1yqMGH+kh0YjscDmnza2C2lzfoooqxBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAJTHdIkLuwVVGSScAD3p9cb471ORPJ02NiquvmS47jOFH5gn8qicuWNxpXdiTUfHUUUhi06388g48x8hSfYdT+lasMWvy2wmlvLWGYjIhEBZR7Ft2fy/WuC0CEXGvWUbDK+arEeuOf6V6tWVNyndtlSSjojjY/GtzZ3j2uq2SAo+1mhJBGO+DnP5iq/iHXW1u1W00y2nli3Au4jPOOwAqn43hEXiEsBjzYlY+/Vf8A2Wl8F6i9rrC2pY+VcgqVPQMBkH+n41m5Ny5G9CrK10V9K8NaneXkW+1lgiDAu8qlMLnsD1NTeNT/AMVC4znEaj6cV6PXmnjFg3ia5H90IP8Ax0H+tOpBRjoKL5pEPhcA+JLPIz8x/wDQTXqNeZeEQD4ns+P7/wD6A1em1dD4RT3Kmo6hb6ZZPdXLYROgHVj2A968/wBR8Ranrd0sETtDFI4VIY2xnJwNx7/yqbxnqZvdXNsrfurb5QM8Fv4j/T8Kr+E4PP8AEdtkZCbnP4KcfrionNynyrYqMbK7O30vw9YadaLEYIpZNvzyOgJY9+vQe1c74r0ddKaPU9NLW4L7JFiJXB7EY6dP5V3FZfiSAXHh69QjO2IuP+A/N/StpQXLZEJu5z/h3xg7ypZ6owO47Un6YPo3+P5+tW/FthdLbtqNndXCGPHmokjBSvTIGeMd/wA64GvSPC16NV0ARz/vGjzDJu/iXHGfwOPwNY05cy5WVJWd0cD/AGnqH/P9c/8Af1v8a7DwXC93bSX1xeTzSJIUVWlYqvAOSM8nmuQ1SxbTdSntGyfLf5Sf4lPIP5Yra8E6l9k1RrRziO6GBnsw6fnyPyqabtOzKkrx0O6vbVb22aBnkjDDh42Ksp9QRXmeozarp1/LaTX1zujbGRK2GHYjnuK9UrhvHkMZu7eVATKIz5uBwFz8pP4lhW1ZaXREHrYxtLub2+1S2tZNQulSWQKxEzZx7c16bBCsEKRJu2oMDcxY/iTya8gileCZJY22vGwZT6EHIr1uxu1vbGG6T7sqBsZ6Z6j8Kmg73Q5oo+JrW3udCujOozFGzoT1DAcY+vT8aj8KaedP0OEOMST/AL1/bPQflj9ak1pftktrpY5W4ffMP+maYJHtk7R+Na9aqKcrkX0sVb6/ttNtWuLqQIi/mT6AdzWNZWd1rN8mq6ohigiOba1b+H/ab3/z0p+qeGp9VvFuJdUdBGcxIsQxH9OevvU1no17bXCPLrVxcxqTmJ14bjoTmk+Zy1WgKyRK2l6Tqtwb11jvMjYCX3KAOwA465rL0W3Sx8W39nZk/ZREGZM5CP8ALgfqf8ipT4VlgnkbTNWnsoZTuaJVyAfbkY/nWppOj2+kwskJZ5JDuklc5Zz70JNtNqw7q25o0UUVqSFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAlefeO43XWopCPleEYPuCcj+X516DWR4h0RdasQikJPGS0THpnuD7GsqkXKNkVF2ZwvhdgviOyJPG4j81Neo15Okd1oeqwvcwPG8MittYfeAPOD0I+leoQXtvcWouoplaFl3b88Y/pWdB2TTHPucL48YHXIgDyLcA/8AfTVn+Gomm8RWSrnKvuOPQDJ/lTtcuH1vxBK1mjTKSEjCKSWAGM/nk11nhbw6dKja5ugPtUi4wOdg9M+pqFFyndbFN2idJXmHiti3ia8P+0o/JVFen15Z4lJPiK9yc/vP6CtK/wAJMNyz4NAPiWDjor/+gmvSq848Ff8AIxJ/1zb+Vej06HwhPc8gv3Z9SunY5ZpmJ+pY1teB1B18kjpCxH5is/xBaNZ67dxEYDSF1+jcj+dXfBcmzxFGuf8AWRuv6Z/pXPHSav3NH8J6RVTVQG0m8BGQYHB/75NW6oa5II9DvXJx+4cA+5UgfzrulszFbnk9dr8Pmyt+meB5ZA+u7/CuKr0DwLZGHSZLlxg3D5Huq8A/nmuOkveRrL4St4703fDFqSLzH+7kx6HofzyPxFcXHI8MqyoxV42DKw7Ecg167eWsd7Zy20o+SVCp/GvJbq3ktLqW3lHzxMVP1FOtG0rrqKDurHqmn6hHfaXFfZCq6bm54Uj7w/Ag1nW+nrq+mXlxOMPqIymR9xB/q/6N+Nc34XuJ7uGTRFUmGZw7tn7qD7w/4FgD8TXoIUKoVQAAMADtW0Hzq7Ia5WeOSxvDM8UilXjYqynsQcGu68CX/nafLYu3zQNuQZ/hP/18/nWN42037Lqou0XEd0MnA6MOD+fB/Os3Q7y5tNRAtBmWdTCozjk8A/gcH8Kwi+SdjR+9E9A0z/S7671E8qW8iA/7Cnkj6tn8hWrUFnapZ2cVtH9yJAo/Cp67ErIyYtFFFMQUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAJXM6h4jMusJpFjNHCzOVluXwQhHUAHgnjHPfiuinLrBIYhlwp2j1OOK8dYlmJYksTkk1hVm42sXGNz1qGwt/svkyZuVY5JnbzNx9eePwHFRHQNI3E/2fBz1ATA/LpXlQJUggkEdxUqXdyn3LiVec/K5FZ+2j1Q+R9z1q3tLa0Xbb28UK9wiBf5VPXlMGv6tbEGPUJ+OgZ94/Jsit/TPHcodY9ShUqePNjGCPcr3/AArSNaL02E4s7evN/GVjJa668+0+VcgMjdsgAMPz5/GvRIJo7mFZoXV43GVZTkEVDf6fa6lbmC6iEiHkeoPqD2NXUjzRshRfKzzDRtSbSdUiuwpdUJDKD95SMH/H8K7g+MNPlCpZLLc3MhCpCEK5J9SeAKqt4BsS+Uu51X+6QpP54rW0nw9p+kZeCNmlIwZZDlse3YfhWcIzjp0HJp6mf4k0CbVbGK4Ta1/AmGCjAcdwM++cVxOn3Eml6tDcOjK0EgLqRg46MPrjNet1najoWnarzdWyl+gkXhh+I6/jVTpXfMtwjK2jLsUqTxLLGwZHAKsOhBrnPG2oJb6SLNWHmXLDI7hQck/ngfnV200CbT4zFY6tcxRdkdVcL9MjimDwpYy3Rub2We9lPUzPx+Qxx7dKcuZxtYSsnc4vQtBuNZuRgFLdD+8lx+g9TXpsMMdvCkMShY0AVVHYCiKKOGNY4kVEUYCqMAfQVJThBRQSlcK4Xx3pvlXUWoxr8so2SEf3gOD+I/8AQa7qqmoafBqdm9rcA+W+CdpwQQc5FOceZWFF2dzE8E6X9k003rriW65GeyDp+fX8q6amRxpHGEjAVVAAA6ADtT6cY8qsDd3cyPE2m/2lossarmWP95H65Hb8RkVy/gfTvtGpPeuuUtlwuf77f4DP5iu/qnp+nW+mxPFbIVV5GkI9z2+g4A+lRKF5JjUrKxcpaKK1JCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAjmljgiaWVwiKMszHAArz3VIvD+o37PZX32V3Pzb4j5ZPqD1X8sfSt3x5O8WlQwocCWX5/cAZx+eD+FcTbade3hH2a1mlz3VCR+fSuWrK75bGkVpc3T4E1MjclxaMCMg7m5/8dqKTwTrKfdSF/wDdk/xxXa6Faz2Wi21tdHMqLg85xySB+AwPwrRq1Ri1cXMzy648L61bKWewdgO8bB/0BJrKIKkgggjgg17NXAeO7WCHUoJo1CvMhLgDqQeD9f8ACsqlFRV0VGd3ZlvwFfSN9osXYlFAkQenOD/T9a7SuK8A2bh7q9YEJtESn1Ocn8uPzrta3pX5FciW4tFFFakhRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFAGT4g0cazppgVgkqHdGx6Z9D7GqOi62LaKPTNVX7HdQqEXfwsgHAIPT/HtXR1DcWtvdReXcQpKn911DD9ahx1utxp6WZKCGAIIIPIIpayh4esov+PZri1z2guHUflnH6U86OSNp1O/x7TAH88Zp3fYWhYv9QtdOgM11MsajoCeT7Ad64k2F/4v1Zrwxtb2fCq7joo7L6nqfTJrrIvD2mJL5z25nl/vzuZD/wCPEitMAAYAwBUOLlvsNO2xBZWkFhaJbW6bI4xgDufc+5qxRS1psIKKKKYBRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQB//Z" />
+    </div>
+  </div>
+
+  <div class="address-block">
+    <div><strong>Kunden Nr.:</strong> ${customer_no!""}</div>
+    <div><strong>${customer_street!""}</strong></div>
+    <div>${customer_email!""}</div>
+    <div>${customer_zipcode!""} ${customer_city!""}</div>
+  </div>
+
+  <div class="address-block">
+    <div><strong>Bestellnummer:</strong> ${sales_doc_number!""}</div>
+    <div><strong>Leistungsdatum:</strong> ${doc_date!""}</div>
+  </div>
+
+  <div class="section-title">Positionen</div>
+  <table class="positions-table">
+    <thead>
+      <tr>
+        <th>Pos.</th>
+        <th>Artikel</th>
+        <th>Menge</th>
+        <th>Preis</th>
+        <th>Einheit</th>
+        <th>Mehrwertsteuer</th>
+        <th>MWSt Betrag</th>
+        <th>Gesamtpreis</th>
+        <th>Rabatt</th>
+      </tr>
+    </thead>
+    <tbody>
+      <#list salesItemList as p>
+        <tr>
+          <td>${p.position!""}</td>
+          <td>${p.item_code!""}</td>
+          <td>${p.sales_item_open_quantity!""}</td>
+          <td>${p.item_price!""} ${p.price_unit!""}</td>
+          <td>${p.price_unit!""}</td>
+          <td>${p.vat_rate!""}</td>
+          <td>${p.vat_amount!""} EUR</td>
+          <td>${p.total_price!""} EUR</td>
+          <td>${p.discount!""} EUR</td>
+        </tr>
+      </#list>
+    </tbody>
+  </table>
+
+
+  <table class="totals">
+    <tr>
+      <td class="label">Warenwert:</td>
+      <td>${sales_gross_amount!""} EUR</td>
+    </tr>
+    <tr>
+      <td class="label">Nettosumme:</td>
+      <td>${total_amount!""} EUR</td>
+    </tr>
+    <tr>
+      <td class="label">Umsatzsteuer 19%:</td>
+      <td>${sales_head_cash_discount_vat_amount!""} EUR</td>
+    </tr>
+    <tr>
+      <td class="label">Zahlungsart:</td>
+      <td>${payment_type_name!""}</td>
+    </tr>
+  </table>
+</body>
+
+</html>
\ No newline at end of file
--- a/template-previewer/src/templates/2/order-data.json
+++ b/template-previewer/src/templates/2/order-data.json
+{
+  "logo": "https://placehold.co/150x50?text=company+logo",
+  "order_no": "2025-AU112650",
+  "order_date": "18.04.2025",
+  "customer_no": "220726",
+  "billing_address": {
+    "name": "Michael Moser",
+    "street": "Lindenweg 10 G",
+    "postal_code": "9063",
+    "city": "Maria Saal",
+    "country": "Austria"
+  },
+  "shipping_address": {
+    "name": "Michael Moser",
+    "street": "Lindenweg 10 G",
+    "postal_code": "9063",
+    "city": "Maria Saal",
+    "country": "Austria"
+  },
+  "salesItemList": [
+    {
+      "pos": "1",
+      "article": "112650",
+      "description": "Rasenwelt Edge Clip Connector - Pack of 50",
+      "delivery_date": "18.04.2025",
+      "quantity": "2",
+      "price": "19.95",
+      "total": "39.90"
+    },
+    {
+      "pos": "2",
+      "article": "103205",
+      "description": "Rasenwelt Universal Ground Pegs - Set of 100",
+      "delivery_date": "18.04.2025",
+      "quantity": "2",
+      "price": "18.95",
+      "total": "37.90"
+    },
+    {
+      "pos": "3",
+      "article": "201001",
+      "description": "Rasenwelt Plastic Stakes - Pack of 200",
+      "delivery_date": "18.04.2025",
+      "quantity": "3",
+      "price": "10.95",
+      "total": "32.85"
+    },
+    {
+      "pos": "4",
+      "article": "109876",
+      "description": "Rasenwelt Turf Reinforcement Mesh - Roll",
+      "delivery_date": "18.04.2025",
+      "quantity": "1",
+      "price": "99.95",
+      "total": "99.95"
+    },
+    {
+      "pos": "5",
+      "article": "100512",
+      "description": "Rasenwelt Soil Preparation Fertilizer - 5kg",
+      "delivery_date": "18.04.2025",
+      "quantity": "5",
+      "price": "8.95",
+      "total": "44.75"
+    }
+  ],
+  "merchandise_value": "673.85",
+  "shipping_cost": "14.90",
+  "net_amount": "652.95",
+  "vat_13": "7.27",
+  "vat_20": "3.62",
+  "total_incl_vat": "784.42",
+  "payment_method": "Shopify Payments",
+  "shipping_method": "DHL International Parcel"
+}
\ No newline at end of file
--- a/template-previewer/src/templates/2/order-template.html
+++ b/template-previewer/src/templates/2/order-template.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Invoice</title>
+  <style>
+    body { font-family: Arial, sans-serif; font-size: 14px; margin: 40px; }
+    .header, .footer { text-align: left; margin-top:20px; }
+    .addresses { display: flex; justify-content: space-between; margin-top: 30px; }
+    .address-box { width: 45%; }
+    table { width: 100%; border-collapse: collapse; margin-top: 30px; }
+    th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
+    th { background-color: #eee; }
+    .totals { margin-top: 20px; width: 270px; float: right; }
+    .totals td { padding: 5px; }
+  </style>
+</head>
+<body>
+
+  <div class="header">
+    <img src="${logo!''}" alt="Company Logo" style="height: 50px;" />
+    <h2>Order Confirmation</h2>
+    <div><strong>Order No.:</strong> ${order_no!""}</div>
+    <div><strong>Order Date:</strong> ${order_date!""}</div>
+    <div><strong>Customer No.:</strong> ${customer_no!""}</div>
+  </div>
+
+  <div class="addresses">
+    <div class="address-box">
+      <h4>Billing Address</h4>
+      <div>${billing_address.name!""}</div>
+      <div>${billing_address.street!""}</div>
+      <div>${billing_address.postal_code!""} ${billing_address.city!""}</div>
+      <div>${billing_address.country!""}</div>
+    </div>
+
+    <div class="address-box">
+      <h4>Shipping Address</h4>
+      <div>${shipping_address.name!""}</div>
+      <div>${shipping_address.street!""}</div>
+      <div>${shipping_address.postal_code!""} ${shipping_address.city!""}</div>
+      <div>${shipping_address.country!""}</div>
+    </div>
+  </div>
+
+  <h3>Order Items</h3>
+  <table>
+    <thead>
+      <tr>
+        <th>Pos</th>
+        <th>Item Code</th>
+        <th>Description</th>
+        <th>Delivery Date</th>
+        <th>Qty</th>
+        <th>Price (€)</th>
+        <th>Total (€)</th>
+      </tr>
+    </thead>
+    <tbody>
+      <#list salesItemList as item>
+        <tr>
+          <td>${item.pos!""}</td>
+          <td>${item.article!""}</td>
+          <td>${item.description!""}</td>
+          <td>${item.delivery_date!""}</td>
+          <td>${item.quantity!""}</td>
+          <td>${item.price!""}</td>
+          <td>${item.total!""}</td>
+        </tr>
+      </#list>
+    </tbody>
+  </table>
+
+  <table class="totals">
+    <tr>
+      <td>Merchandise Value:</td>
+      <td>€ ${merchandise_value!""}</td>
+    </tr>
+    <tr>
+      <td>Shipping Cost:</td>
+      <td>€ ${shipping_cost!""}</td>
+    </tr>
+    <tr>
+      <td>Net Amount:</td>
+      <td>€ ${net_amount!""}</td>
+    </tr>
+    <tr>
+      <td>VAT 13%:</td>
+      <td>€ ${vat_13!""}</td>
+    </tr>
+    <tr>
+      <td>VAT 20%:</td>
+      <td>€ ${vat_20!""}</td>
+    </tr>
+    <tr>
+      <th>Total incl. VAT:</th>
+      <th>€ ${total_incl_vat!""}</th>
+    </tr>
+  </table>
+
+  <div class="footer">
+    <p><strong>Payment Method:</strong> ${payment_method!""}</p>
+    <p><strong>Shipping Method:</strong> ${shipping_method!""}</p>
+  </div>
+
+</body>
+</html>
--- a/template-previewer/src/templates/argelith /argelith-data.json
+++ b/template-previewer/src/templates/argelith /argelith-data.json
--- a/template-previewer/src/templates/argelith /argelith.html
+++ b/template-previewer/src/templates/argelith /argelith.html
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Auftrag</title>
+  <style type="text/css">
+    @page {
+      margin-bottom: 20mm;
+
+      @bottom-center {
+        content: element(standard-footer);
+      }
+    }
+
+    @page: first {
+      @bottom-center {
+        content: none;
+      }
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      margin: 40px;
+      position: relative;
+      min-height: 100vh;
+      padding-bottom: 60px;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .company-info {
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
+    .logo {
+      width: 150px;
+    }
+
+    .delivery-address,
+    .billing-address {
+      margin-top: 20px;
+    }
+
+    h1 {
+      font-size: 16px;
+      margin-top: 40px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 10px;
+      font-size: 11px;
+      -fs-table-paginate: paginate;
+      -fs-page-break-min-height: 1.5cm;
+    }
+
+    tr,
+    thead,
+    tfoot {
+      page-break-inside: avoid;
+    }
+
+    th,
+    td {
+      border: 1px solid #000;
+      padding: 4px;
+      text-align: left;
+    }
+
+    .summary {
+      margin-top: 20px;
+      width: 300px;
+      float: right;
+      font-size: 12px;
+    }
+
+    .summary td {
+      border: none;
+      padding: 2px 0;
+    }
+
+    /* Visible only for page > 1 via @page rules */
+    .footer {
+      display: block;
+      position: running(standard-footer);
+      font-size: 10px;
+      border-top: 1px solid #eee;
+      padding-top: 5px;
+    }
+
+    .footer-info {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .certification {
+      width: 80px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <div class="header">
+    <div class="company-info">
+      <strong>${company.name}</strong><br />
+      ${company.address}
+    </div>
+    <img src="${company.logo!''}" alt="Logo" class="logo" />
+  </div>
+
+  <div class="delivery-address">
+    <strong>Lieferadresse:</strong><br />
+    ${deliveryAddress.companyName}<br />
+    ${deliveryAddress.street}<br />
+    ${deliveryAddress.postalCodeCity}<br />
+    ${deliveryAddress.country}
+  </div>
+
+  <div class="billing-address">
+    <strong>Abrechnung über:</strong><br />
+    ${billingAddress.companyName}<br />
+    ${billingAddress.street}<br />
+    ${billingAddress.postalCodeCity}<br />
+    ${billingAddress.country}
+  </div>
+
+  <h1>Auftrag</h1>
+
+  <table>
+    <tr>
+      <th>Voucher No</th>
+      <th>Customer No</th>
+      <th>Tax No</th>
+      <th>Document Date</th>
+      <th>Area</th>
+      <th></th>
+    </tr>
+
+    <tr>
+      <td>20201946</td>
+      <td>87501000</td>
+      <td></td>
+      <td>29.04.2025</td>
+      <td>Voucher No</td>
+      <td></td>
+    </tr>
+    <tr>
+      <th>Purchase No</th>
+      <th>Order Date</th>
+      <th>Vat ID</th>
+      <th>Country</th>
+      <th>Object No</th>
+      <th></th>
+    </tr>
+
+    <tr>
+      <td>OOM1-113/2025 // PL</td>
+      <td></td>
+      <td>CZ01512161</td>
+      <td>Litauen</td>
+      <td>747195</td>
+      <td></td>
+    </tr>
+  </table>
+  <table>
+    <thead>
+      <tr>
+        <th>Beleg-Nr.</th>
+        <td colspan="2">${order.documentNumber}</td>
+        <th>Belegdatum</th>
+        <td colspan="2">${order.orderDate}</td>
+        <th>Gebiet</th>
+        <td>${order.region}</td>
+      </tr>
+      <tr>
+        <th>Pos.</th>
+        <th>Artikelnummer</th>
+        <th>Bezeichnung</th>
+        <th>Menge</th>
+        <th>Preis/ME</th>
+        <th>Fracht/ME</th>
+        <th>Preis inkl. Fracht/ME</th>
+        <th>Summe</th>
+      </tr>
+    </thead>
+    <tbody>
+      <#list items as item>
+        <tr>
+          <td>${item.position}</td>
+          <td>${item.articleNumber}</td>
+          <td>${item.description}</td>
+          <td>${item.quantity}</td>
+          <td>${item.pricePerUnit}</td>
+          <td>${item.freightPerUnit}</td>
+          <td>${item.totalPricePerUnit}</td>
+          <td>${item.total}</td>
+        </tr>
+      </#list>
+    </tbody>
+  </table>
+
+  <table class="summary">
+    <tr>
+      <td>Netto-Warenwert:</td>
+      <td align="right">${summary.netGoodsValue}</td>
+    </tr>
+    <tr>
+      <td>Nettosumme:</td>
+      <td align="right">${summary.netSum}</td>
+    </tr>
+    <tr>
+      <td>Umsatzsteuer 19%:</td>
+      <td align="right">${summary.vat19}</td>
+    </tr>
+    <tr>
+      <td><strong>Betrag inkl. MwSt.:</strong></td>
+      <td align="right"><strong>${summary.grossTotal}</strong></td>
+    </tr>
+  </table>
+
+  <!-- Footer content for all pages except the first -->
+  <div class="footer">
+    <div class="footer-info">
+      <div>
+        ${company.name}<br />
+        ${company.address}<br />
+        Tel. ${company.phone}<br />
+        ${company.email}<br />
+        ${company.website}
+      </div>
+      <div>
+        Commerzbank AG<br />
+        IBAN: ${bankDetails.commerzbankIban}<br />
+        Sparkasse Osnabrück<br />
+        IBAN: ${bankDetails.sparkasseIban}
+      </div>
+      <div>
+        <img src="${company.certification!''}" alt="Certification" class="certification" />
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/template-previewer/src/templates/barcode/barcode-data.json
+++ b/template-previewer/src/templates/barcode/barcode-data.json
+{
+  "barkodlar": [
+    {
+      "urunAdi": "Knoblauchpaste",
+      "ean": "4003934020735"
+    },
+    {
+      "urunAdi": "Kranzdärme 43/46 mm",
+      "ean": "4003934012914"
+    }
+  ]
+}
\ No newline at end of file
--- a/template-previewer/src/templates/barcode/barcode-template.html
+++ b/template-previewer/src/templates/barcode/barcode-template.html
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Barkod Etiketi</title>
+  <style type="text/css">
+    .etiket {
+      width: 190px;
+      /* yaklaşık 5cm */
+      height: 95px;
+      /* yaklaşık 2.5cm */
+      border: 1px solid #000;
+      padding: 4px;
+      box-sizing: border-box;
+      font-family: Arial, sans-serif;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .urun-adi {
+      font-size: 12px;
+      font-weight: bold;
+      margin-top: 4px;
+    }
+
+    .barkod {
+      flex-grow: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 4px 0;
+    }
+
+    .ean {
+      font-size: 10px;
+      margin-bottom: 4px;
+    }
+
+    img {
+      max-height: 40px;
+    }
+  </style>
+</head>
+
+<body>
+
+  <#list barkodlar as barkod>
+    <div class="etiket">
+      <div class="urun-adi">${barkod.urunAdi}</div>
+      <div class="barkod">
+        <img src="https://barcode.tec-it.com/barcode.ashx?data=${barkod.ean}" alt="Barkod" />
+      </div>
+    </div>
+  </#list>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/template-previewer/src/templates/etiket/etiket-data.json
+++ b/template-previewer/src/templates/etiket/etiket-data.json
+{
+  "urun": {
+    "tip": "Schweinedarm, 28",
+    "ebat": "30 mm",
+    "uzunluk": "25 Meter",
+    "artikelNr": "1101256-006",
+    "inhalt": "",
+    "lot": "1101256-006-26.02.2025 07:59:17",
+    "skt": "26.02.2027",
+    "ulkekodu": "DE",
+    "onaynumarasi": "BW EV205 EG",
+    "barkodUrl": "https://barcode.tec-it.com/barcode.ashx?data=4004333106272"
+  }
+}
\ No newline at end of file
--- a/template-previewer/src/templates/etiket/etiket-template.html
+++ b/template-previewer/src/templates/etiket/etiket-template.html
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Etikett</title>
+  <style type="text/css">
+    .etiket {
+      width: 350px;
+      border: 2px solid #ccc;
+      padding: 16px;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      background-color: #ffffff;
+    }
+
+    .logo {
+      font-weight: bold;
+      font-size: 16px;
+      text-align: left;
+      background-color: #000000;
+      color: #ffffff;
+      padding: 5px 10px;
+      margin-bottom: 12px;
+      width: fit-content;
+    }
+
+    .icerik p {
+      margin: 4px 0;
+    }
+
+    .barkod img {
+      margin-top: 10px;
+      width: 150px;
+      height: auto;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="etiket">
+    <div class="logo">LOGO</div>
+    <div class="icerik">
+      <p><strong>Alles für die Wurst - ${urun.tip}</strong></p>
+      <p>${urun.ebat}, ${urun.uzunluk}</p>
+
+      <p><strong>Artikel-Nr.:</strong> ${urun.artikelNr}</p>
+      <p><strong>Inhalt:</strong> ${urun.inhalt}</p>
+      <p><strong>Charge/LOS:</strong> ${urun.lot}</p>
+      <p><strong>Bei sachgemäßer Lagerung</strong></p>
+      <p><strong>mindestens haltbar bis:</strong> ${urun.skt}</p>
+
+      <p>${urun.ulkekodu}<br />${urun.onaynumarasi}</p>
+      <div class="barkod">
+        <img src="${urun.barkodUrl}" alt="Barkod" />
+      </div>
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
--- a/template-previewer/src/templates/etiket2/etiket2-data.json
+++ b/template-previewer/src/templates/etiket2/etiket2-data.json
+{
+  "etiketler": [
+    {
+      "urunAdi": "Kranzdärme aus Argentinien - 43/46 mm",
+      "artikelNr": "03105",
+      "inhalt": "18 Meter",
+      "charge": "03105-26.02.2026 08:22:45",
+      "lagerung": "21.08.2025",
+      "barkodUrl": "https://barcode.tec-it.com/barcode.ashx?data=4003934012914"
+    },
+    {
+      "urunAdi": "Knoblauchpaste",
+      "zusatz": "nach Geschmack",
+      "zutaten": "Knoblauch (60%), Salz (40%)",
+      "gewicht": "1 kg",
+      "artikelNr": "1516141000",
+      "barkodUrl": "https://barcode.tec-it.com/barcode.ashx?data=4003934020735",
+      "skt": "11.12.2025"
+    }
+  ]
+}
\ No newline at end of file
--- a/template-previewer/src/templates/etiket2/etiket2-template.html
+++ b/template-previewer/src/templates/etiket2/etiket2-template.html
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Etikett</title>
+  <style type="text/css">
+    .etiket {
+      width: 500px;
+      border: 2px solid #ccc;
+      padding: 12px;
+      font-family: Arial, sans-serif;
+      font-size: 14px;
+      background-color: #ffffff;
+      margin-bottom: 20px;
+      display: flex;
+    }
+
+    .sidebar {
+      width: 70px;
+      background-color: #88C057;
+      color: #ffffff;
+      text-align: center;
+      padding: 8px 4px;
+      font-size: 12px;
+    }
+
+    .icerik {
+      flex: 1;
+      padding: 0 12px;
+    }
+
+    .icerik p {
+      margin: 4px 0;
+    }
+
+    .urun-baslik {
+      font-weight: bold;
+      font-size: 15px;
+      margin-bottom: 10px;
+    }
+
+    .barkod {
+      margin-top: 10px;
+    }
+
+    .barkod img {
+      width: 150px;
+      height: auto;
+    }
+  </style>
+</head>
+
+<body>
+
+  <#list etiketler as etiket>
+    <div class="etiket">
+      <div class="sidebar">
+        <p>Fleisch.de</p>
+        <!-- ikonlar yerine yazı yazıldı, istenirse simgeler eklenebilir -->
+        <p>HACCP</p>
+        <p>EG</p>
+      </div>
+      <div class="icerik">
+        <p class="urun-baslik">${etiket.urunAdi}</p>
+
+        <#if etiket.artikelNr??>
+          <p><strong>Artikel-Nr.:</strong> ${etiket.artikelNr}</p>
+        </#if>
+        <#if etiket.inhalt??>
+          <p><strong>Inhalt:</strong> ${etiket.inhalt}</p>
+        </#if>
+        <#if etiket.charge??>
+          <p><strong>Charge/LOS:</strong> ${etiket.charge}</p>
+        </#if>
+        <#if etiket.lagerung??>
+          <p><strong>Bei sachgemäßer Lagerung</strong></p>
+          <p><strong>mindestens haltbar bis:</strong> ${etiket.lagerung}</p>
+        </#if>
+
+        <#if etiket.zusatz??>
+          <p><strong>Zugabe:</strong> ${etiket.zusatz}</p>
+        </#if>
+        <#if etiket.zutaten??>
+          <p><strong>Zutaten:</strong> ${etiket.zutaten}</p>
+        </#if>
+        <#if etiket.gewicht??>
+          <p><strong>Einwaage:</strong> ${etiket.gewicht}</p>
+        </#if>
+
+        <#if etiket.barkodUrl??>
+          <div class="barkod">
+            <img src="${etiket.barkodUrl}" alt="Barkod" />
+          </div>
+        </#if>
+
+        <#if etiket.skt??>
+          <p><strong>Mindestens haltbar bis:</strong> ${etiket.skt}</p>
+        </#if>
+      </div>
+    </div>
+  </#list>
+
+</body>
+
+</html>
\ No newline at end of file
--- a/template-previewer/src/templates/smilestore/order-data.json
+++ b/template-previewer/src/templates/smilestore/order-data.json
--- a/template-previewer/src/templates/smilestore/order-template.html
+++ b/template-previewer/src/templates/smilestore/order-template.html
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+  <meta charset="UTF-8">
+  </meta>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </meta>
+  <title>Rechnung</title>
+  <style>
+    tr,
+    thead,
+    tfoot {
+      page-break-inside: avoid;
+    }
+
+    @page {
+      @bottom-center {
+        content: "Page " counter(page) " of " counter(pages);
+        font-size: 10px;
+        color: #888;
+      }
+
+      margin-bottom: 30mm;
+    }
+
+    body {
+      font-family: Arial, sans-serif;
+      font-size: 12px;
+      color: #000;
+      margin: 0;
+      padding: 20px;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+
+      /* The magical table pagination property. */
+      -fs-table-paginate: paginate;
+
+      /* Recommended to avoid leaving thead on a page by itself. */
+      -fs-page-break-min-height: 1.5cm;
+    }
+
+    td,
+    th {
+      padding: 4px;
+      vertical-align: top;
+    }
+
+    .header-row {
+      border-bottom: 1px solid #ccc;
+      margin-bottom: 10px;
+      padding-bottom: 5px;
+    }
+
+    .sender {
+      color: #666;
+      font-size: 10px;
+    }
+
+    .auftrag-box {
+      border: 1px solid #000;
+      padding: 5px;
+    }
+
+    .auftrag-title {
+      font-weight: bold;
+      font-size: 14px;
+      margin-bottom: 8px;
+    }
+
+    .items-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 15px 0;
+    }
+
+    .items-table th {
+      background-color: #f0f0f0;
+      border-bottom: 1px solid #999;
+      text-align: left;
+    }
+
+    .items-table td {
+      border-bottom: 1px solid #ddd;
+      padding: 6px 4px;
+    }
+
+    .notice {
+      font-size: 9px;
+      color: #555;
+    }
+
+    .total-box {
+      border: 1px solid #000;
+      width: 300px;
+      float: right;
+      margin-bottom: 15px;
+    }
+
+    .total-row {
+      display: table;
+      width: 100%;
+    }
+
+    .total-label {
+      display: table-cell;
+      width: 70%;
+      padding: 3px 5px;
+    }
+
+    .total-value {
+      display: table-cell;
+      width: 30%;
+      text-align: right;
+      padding: 3px 5px;
+    }
+
+    .strong {
+      font-weight: bold;
+    }
+
+    .clear {
+      clear: both;
+    }
+  </style>
+</head>
+
+<body>
+  <!-- Header -->
+  <table class="header-row">
+    <tr>
+      <td class="sender">${verkaufer.name} · ${verkaufer.kontaktperson} · ${verkaufer.strasse} · ${verkaufer.plz}
+        ${verkaufer.ort}</td>
+    </tr>
+  </table>
+
+  <!-- Customer and Auftrag section -->
+  <table>
+    <tr>
+      <td style="width: 60%;">
+        <!-- Customer Address -->
+        <p>
+          ${kunde.vorname} ${kunde.nachname}<br></br>
+          ${kunde.strasse}<br></br>
+          ${kunde.plz} ${kunde.ort}
+        </p>
+        <br></br>
+        <!-- Delivery Address -->
+        <p>
+          <strong>Lieferung erfolgt an:</strong><br></br>
+          ${lieferung.vorname} ${lieferung.nachname}<br></br>
+          ${lieferung.strasse}<br></br>
+          ${lieferung.plz} ${lieferung.ort}
+        </p>
+      </td>
+      <td style="width: 40%;">
+        <!-- Auftrag Box -->
+        <div class="auftrag-box">
+          <div class="auftrag-title">Auftrag</div>
+          <table style="width: 100%;">
+            <tr>
+              <td style="width: 50%;">Verkaufsbeleg Nr.</td>
+              <td style="width: 50%;">Datum</td>
+            </tr>
+            <tr>
+              <td>${belegnr}</td>
+              <td>${datum}</td>
+            </tr>
+            <tr>
+              <td>Kunden-Nr.</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td>${kundennr}</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colspan="2">Ref-Nr.: ${refnr}</td>
+            </tr>
+          </table>
+        </div>
+      </td>
+    </tr>
+  </table>
+
+  <!-- Greeting -->
+  <div style="margin: 20px 0;">
+    <p>Guten Tag ${kunde.vorname} ${kunde.nachname},</p>
+    <p>vielen Dank für Ihren Auftrag und das entgegengebrachte Vertrauen.</p>
+  </div>
+
+  <!-- Items Table -->
+  <table class="items-table">
+    <thead>
+      <tr>
+        <th>Image</th>
+        <th>Artikelnr.</th>
+        <th>Bezeichnung</th>
+        <th>Menge</th>
+        <th>Einzelpreis</th>
+        <th>Gesamtpreis</th>
+      </tr>
+    </thead>
+    <tbody>
+      <#list artikel as item>
+        <tr>
+          <td><img src="${logo!''}" alt="Company Logo" style="height: 20px;" /></td>
+          <td>${item.artikelnr}</td>
+          <td>
+            ${item.bezeichnung}
+            <#if item.hinweis?has_content>
+              <br></br><span class="notice">${item.hinweis}</span>
+            </#if>
+          </td>
+          <td>${item.menge}</td>
+          <td>${item.einzelpreis} €</td>
+          <td>${item.gesamtpreis} €</td>
+        </tr>
+      </#list>
+    </tbody>
+  </table>
+
+  <!-- Total Box -->
+  <div class="total-box">
+    <div class="total-row">
+      <div class="total-label">Warenwert</div>
+      <div class="total-value">${summen.warenwert}</div>
+    </div>
+    <div class="total-row">
+      <div class="total-label">Nettosumme</div>
+      <div class="total-value">${summen.netto}</div>
+    </div>
+    <div class="total-row">
+      <div class="total-label">Umsatzsteuer 19%</div>
+      <div class="total-value">${summen.steuer}</div>
+    </div>
+    <div class="total-row">
+      <div class="total-label strong">Betrag inkl. MwSt.</div>
+      <div class="total-value strong">${summen.brutto}</div>
+    </div>
+  </div>
+
+  <!-- Payment Information -->
+  <div class="clear" style="margin-top: 10px;">
+    <p>Zahlungsart : ${zahlungsart}</p>
+    <p>Die Rechnung zu dieser Sendung erhalten Sie von Otto.</p>
+  </div>
+</body>
+
+</html>
\ No newline at end of file