config and templates

config.go

@@ -0,0 +1,31 @@
+package main
+
+import (
+	_ "embed"
+	"time"
+
+	"github.com/BurntSushi/toml"
+)
+
+//go:embed config.default.toml
+var defaultConfig string
+
+var config struct {
+	Database struct {
+		File string
+	}
+
+	Server struct {
+		Addr              string
+		ReadHeaderTimeout time.Duration
+		RequestTimeout    time.Duration
+	}
+}
+
+func loadConfig() {
+	_, err := toml.Decode(defaultConfig, &config)
+	if err != nil {
+		panic(err)
+	}
+	_, _ = toml.DecodeFile("config.toml", &config)
+}

main.go

@@ -2,37 +2,24 @@ package main
 
 import (
 	"context"
+	"embed"
 	_ "embed"
 	"errors"
 	"fmt"
 	"log"
 	"net/http"
 	"strconv"
-	"time"
 
 	"github.com/Bronku/iroon/models"
 	"github.com/Bronku/iroon/store"
-	"github.com/BurntSushi/toml"
 	"github.com/go-chi/chi/middleware"
 	"github.com/go-chi/chi/v5"
 	"gorm.io/gorm"
 	"gorm.io/gorm/clause"
 )
 
-type config struct {
+//go:embed static/*
-	Database struct {
+var static embed.FS
-		File string
-	}
-
-	Server struct {
-		Addr              string
-		ReadHeaderTimeout time.Duration
-		RequestTimeout    time.Duration
-	}
-}
-
-//go:embed config.default.toml
-var defaultConfig string
 
 type contextKey string
 
@@ -40,19 +27,11 @@ const dbContextKey = contextKey("db")
 const orderContextKey = contextKey("order")
 
 func main() {
-	// load config
+	loadConfig()
-	var conf config
+	loadTemplates()
-	_, err := toml.Decode(defaultConfig, &conf)
-	if err != nil {
-		log.Fatal(err)
-	}
-	_, err = toml.DecodeFile("config.toml", &conf)
-	if err != nil {
-		log.Println("using default config")
-	}
 
 	// load database
-	db, err := store.LoadStore(conf.Database.File)
+	db, err := store.LoadStore(config.Database.File)
 	if err != nil {
 		log.Panic(err)
 	}
@@ -62,29 +41,24 @@ func main() {
 	r.Use(middleware.RealIP)
 	r.Use(middleware.Logger)
 	r.Use(middleware.Recoverer)
-	r.Use(middleware.Timeout(conf.Server.RequestTimeout))
+	r.Use(middleware.Timeout(config.Server.RequestTimeout))
 
-	r.Get("/", func(w http.ResponseWriter, r *http.Request) {
+	r.Get("/", http.RedirectHandler("/orders", http.StatusSeeOther).ServeHTTP)
-		w.Write([]byte("welcome"))
+	r.Get("/static/", http.FileServerFS(static).ServeHTTP)
-	})
 
 	r.Route("/orders", func(r chi.Router) {
 		r.Use(middleware.WithValue(dbContextKey, db))
 		r.Route("/{orderID}", func(r chi.Router) {
-			r.Use(OrderCtx) // Load the *Article on the request context
+			r.Use(OrderCtx)
 			r.Get("/", getOrder)
-			// r.Get("/", GetArticle)       // GET /articles/123
-			// r.Put("/", UpdateArticle)    // PUT /articles/123
-			// r.Delete("/", DeleteArticle) // DELETE /articles/123
 		})
-
 	})
 
 	// start server
 	server := &http.Server{
 		Handler:           r,
-		Addr:              conf.Server.Addr,
+		Addr:              config.Server.Addr,
-		ReadHeaderTimeout: conf.Server.ReadHeaderTimeout,
+		ReadHeaderTimeout: config.Server.ReadHeaderTimeout,
 	}
 	err = server.ListenAndServe()
 	if err != nil {

static/fontawesome/css/solid.css

@@ -0,0 +1,19 @@
+/*!
+ * Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2024 Fonticons, Inc.
+ */
+:root, :host {
+  --fa-style-family-classic: 'Font Awesome 6 Free';
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: block;
+  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+
+.fas,
+.fa-solid {
+  font-weight: 900; }

static/order.js

@@ -0,0 +1,55 @@
+function addCake(id, name, price, amount) {
+  const cake = document.querySelector(`[name="cake[${id}]"]`);
+  if (cake != null) {
+    cake.value = Number(cake.value) + 1;
+    let tr = cake.parentElement.parentElement.parentElement;
+    //console.log(tr);
+    tr.querySelector(".cake-total").innerText =
+      `${price * Number(cake.value)}PLN`;
+    updateTotalPrice();
+    return;
+  }
+  let template = document.getElementById("basket_element_template");
+  let tr = template.content.querySelector("tr").cloneNode(true);
+  tr.querySelector(".cake-name").innerText = name;
+  tr.querySelector(".cake-price").innerText = `${price}PLN`;
+  tr.querySelector(".cake-total").innerText = `${price * amount}PLN`;
+  tr.querySelector("button").onclick = () => {
+    tr.remove();
+  };
+  let input = tr.querySelector("input");
+  input.onchange = () => {
+    if (input.value == 0) {
+      tr.remove();
+    }
+    tr.querySelector(".cake-total").innerText = `${price * input.value}PLN`;
+    updateTotalPrice();
+  };
+  input.value = amount;
+  input.name = `cake[${id}]`;
+  document.querySelector("#basket_table").appendChild(tr);
+  updateTotalPrice();
+}
+function updateTotalPrice() {
+  document.querySelector("#total-price").innerText = `${totalPrice()}PLN`;
+}
+function totalPrice() {
+  let out = 0;
+  const cakes = document.querySelectorAll("#basket_table>tr");
+  cakes.forEach((e) => {
+    let priceString = e.querySelector(".cake-price").innerText;
+    let price = Number(priceString.substring(0, priceString.length - 3));
+    let amount = Number(e.querySelector("input").value);
+    out += price * amount;
+    // console.log(out);
+  });
+  return out;
+}
+function toggleDetails(row) {
+  const detailsRow = row.nextElementSibling;
+  if (detailsRow.classList.contains("hidden")) {
+    detailsRow.classList.remove("hidden");
+    return;
+  }
+  detailsRow.classList.add("hidden");
+}

static/style.css

@@ -0,0 +1,368 @@
+:root {
+  --primary-color: #ff6b6b;
+  --primary-light: #ffeded;
+  --primary-dark: #e64c4c;
+  --text-color: #333333;
+  --text-light: #666666;
+  --background-color: #f8f9fa;
+  --white: #ffffff;
+  --border-color: #e4e9ec;
+  --hover-color: #f5f5f5;
+  --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --bottom-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
+  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  --transition: 0.2s ease;
+  --radius: 6px;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-main);
+  color: var(--text-color);
+  background-color: var(--background-color);
+  display: flex;
+  width: 100%;
+  line-height: 1.6;
+}
+
+/* Sidebar */
+aside {
+  min-width: 4.5rem;
+  max-width: 4.5rem;
+  background-color: var(--primary-color);
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  border-right: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
+  z-index: 10;
+}
+
+nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 2rem;
+  gap: 1.5rem;
+  height: 100%;
+}
+
+nav>a {
+  color: var(--white);
+  text-decoration: none;
+  font-size: 1.5rem;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition: background-color var(--transition);
+  position: relative;
+}
+
+nav>a:hover {
+  background-color: var(--primary-dark);
+}
+
+nav>a:last-child {
+  margin-top: auto;
+  margin-bottom: 2rem;
+}
+
+nav>a>i {
+  text-decoration: none;
+  color: var(--white);
+}
+
+/* Tooltip for sidebar icons */
+nav>a::after {
+  content: attr(data-title);
+  position: absolute;
+  left: 120%;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: var(--text-color);
+  color: var(--white);
+  padding: 0.3rem 0.8rem;
+  border-radius: var(--radius);
+  font-size: 0.8rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--transition);
+  z-index: 1;
+}
+
+nav>a:hover::after {
+  opacity: 1;
+}
+
+/* Main content area */
+.app-body {
+  flex: 1;
+  margin-left: 4.5rem;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  overflow-x: hidden;
+}
+
+header {
+  background-color: var(--white);
+  border-bottom: 1px solid var(--border-color);
+  padding: 1rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+h1 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+main {
+  flex: 1;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 1.5rem;
+  overflow: hidden;
+}
+
+/* Search form */
+.search-container {
+  background-color: var(--white);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  align-items: flex-end;
+  box-shadow: var(--shadow);
+}
+
+.search-box {
+  flex: 1;
+  min-width: 250px;
+  position: relative;
+}
+
+.search-box input {
+  width: 100%;
+  padding: 0.75rem 1rem 0.75rem 2.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  font-size: 1rem;
+  transition: border-color var(--transition);
+}
+
+.search-box::before {
+  content: "🔍";
+  position: absolute;
+  left: 1rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-light);
+}
+
+.search-container label:not(.search-box) {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--text-light);
+}
+
+.search-container input[type="date"] {
+  padding: 0.75rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius);
+  min-width: 160px;
+}
+
+.search-container input:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
+}
+
+/* Table styling */
+#results-table {
+  background-color: var(--white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  /* overflow: hidden; */
+  margin-top: 1rem;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  font-size: 0.95rem;
+}
+
+thead {
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--white);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-shadow: 0 2px 0 var(--border-color);
+}
+
+tbody th {
+  font-weight: 300;
+  color: var(--text-color);
+}
+
+thead th {
+  color: var(--text-light);
+  font-weight: 100;
+  font-size: rem;
+  font-size: 0.8rem;
+  /* box-shadow: var(--bottom-shadow); */
+}
+
+
+th {
+  text-align: left;
+  padding: 1rem;
+  /* color: var(--primary-dark); */
+}
+
+td {
+  padding: 1rem;
+}
+
+th:first-child,
+td:first-child {
+  padding-left: 1.5rem;
+}
+
+th:last-child,
+td:last-child {
+  padding-right: 1.5rem;
+}
+
+tr.clickable {
+  cursor: pointer;
+  transition: background-color var(--transition);
+}
+
+tr.clickable:hover {
+  background-color: var(--hover-color);
+}
+
+tr.active {
+  background-color: var(--primary-light);
+}
+
+/* Order details */
+.details-content {
+  background-color: var(--hover-color);
+  padding: 0 !important;
+}
+
+.details-content table {
+  margin: 0;
+  box-shadow: none;
+}
+
+.details-content th {
+  background-color: transparent;
+  font-weight: normal;
+}
+
+/* Links */
+a {
+  text-decoration: none;
+  color: var(--text-light);
+}
+
+tr a {
+  text-decoration: underline;
+  color: var(--primary-color);
+}
+
+.order {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 1.5rem;
+  background-color: var(--white);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  height: 100%;
+}
+
+.order div {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.order>div {
+  flex-basis: 0;
+  flex-shrink: 0;
+}
+
+.order-contents>*:first-child,
+.order-contents>*:last-child {
+  flex-grow: 0;
+}
+
+.order label {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+}
+
+.scrollable {
+  overflow-y: auto;
+  min-height: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .search-container {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search-container>* {
+    width: 100%;
+  }
+
+  aside {
+    min-width: 3.5rem;
+    max-width: 3.5rem;
+  }
+
+  .app-body {
+    margin-left: 3.5rem;
+  }
+
+  nav a {
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.2rem;
+  }
+}

template.go

@@ -0,0 +1,49 @@
+package main
+
+import (
+	"embed"
+	"log"
+	"path/filepath"
+	"strings"
+	"text/template"
+)
+
+//go:embed templates/layout/*
+var layout embed.FS
+
+//go:embed templates/pages/*
+var pages embed.FS
+
+var templates map[string]*template.Template
+
+func loadTemplates() {
+	// Read all page template files
+	pageFiles, err := pages.ReadDir("templates/pages")
+	if err != nil {
+		log.Fatal(err)
+	}
+
+	for _, pageFile := range pageFiles {
+		if pageFile.IsDir() {
+			continue
+		}
+
+		// Extract template name from filename (without extension)
+		templateName := strings.TrimSuffix(pageFile.Name(), filepath.Ext(pageFile.Name()))
+
+		// Create template with layout and specific page
+		tmpl, err := template.ParseFS(layout, "templates/layout/*.gohtml")
+		if err != nil {
+			log.Fatal(err)
+		}
+
+		// Parse the specific page template
+		pagePattern := "templates/pages/" + pageFile.Name()
+		tmpl, err = tmpl.ParseFS(pages, pagePattern)
+		if err != nil {
+			log.Fatal(err)
+		}
+
+		templates[templateName] = tmpl
+	}
+}

templates/layout/layout.gohtml

@@ -0,0 +1,28 @@
+{{define "layout"}}
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>{{template "title" .}}</title>
+    <script src="/static/htmx2.04.js" defer></script>
+    <script src="/static/order.js" ></script>
+    <link rel="stylesheet" href="/static/style.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/solid.css">
+</head>
+
+<body>
+    <aside>
+        <nav>{{template "nav" .}}</nav>
+    </aside>
+    <div class="app-body">
+        <header>
+            <h1>{{template "title" .}}</h1>
+        </header>
+        {{template "main" .}}
+    </div>
+</body>
+
+</html>
+{{end}}

templates/layout/nav.gohtml

@@ -0,0 +1,7 @@
+{{define "nav"}}
+<a href="/orders" data-title="Zamówienia"><i class="fa-solid fa-list-ul"></i></a>
+<a href="/order" data-title="Nowe zamówienie"><i class="fa-solid fa-plus-circle"></i></a>
+<a href="/cakes" data-title="Wszystkie ciasta"><i class="fa-solid fa-birthday-cake"></i></a>
+<a href="/cake" data-title="Nowe ciasto"><i class="fa-solid fa-plus"></i></a>
+<a href="/logout" data-title="Wyloguj"><i class="fa-solid fa-sign-out-alt"></i></a>
+{{end}}

templates/pages/cake.gohtml

@@ -0,0 +1,24 @@
+{{define "title"}}
+Cake {{.ID}}
+{{end}}
+{{define "main"}}
+<main>
+    <form method="post">
+        <div>
+            <h2>Info</h2>
+            <label>
+                <input hidden="hidden" name="id" value="{{.ID}}">
+            </label>
+            <label>name</label>
+            <label>
+                <input type="text" name="name" value="{{.Name}}">
+            </label>
+            <label>price</label>
+            <label>
+                <input type="number" name="price" min="0" value="{{.Price}}">
+            </label>
+        </div>
+        <button type="submit">submit</button>
+    </form>
+</main>
+{{end}}

templates/pages/cakes.gohtml

@@ -0,0 +1,21 @@
+{{define "title"}}
+Cakes
+{{end}}
+{{define "main"}}
+<main>
+    <table>
+        <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Price</th>
+        </tr>
+        {{range .}}
+        <tr>
+            <th><a href="/cake/{{.ID}}">edit</a></th>
+            <th>{{.Name}}</th>
+            <th>{{.Price}}</th>
+        </tr>
+        {{end}}
+    </table>
+</main>
+{{end}}

templates/pages/confirmation.gohtml

@@ -0,0 +1,8 @@
+{{define "title"}}
+Confirmed
+{{end}}
+{{define "main"}}
+<main>
+    <h2>{{.ID}} confirmed</h2>
+</main>
+{{end}}

templates/pages/order.gohtml

@@ -0,0 +1,113 @@
+{{define "title"}}
+    {{if .Order.ID}}
+    Edytuj zamówienie #{{.Order.ID}}
+    {{else}}
+    Nowe zamówienie
+    {{end}}
+{{end}}
+{{define "main"}}
+    <main>
+        <form method="post" class="order">
+            {{with .Order}}
+            <div class="order-contents">
+                <div>
+                    <h2>Dane zamówienia</h2>
+                    <label>
+                        <input hidden="hidden" name="id" value="{{.ID}}">
+                    </label>
+                    <label>Imię
+                        <input type="text" name="name" value="{{.Name}}">
+                    </label>
+                    <label>Nazwisko
+                        <input type="text" name="surname" value="{{.Surname}}">
+                    </label>
+                    <label>Numer telefonu
+                        <input type="tel" name="phone" value="{{.Phone}}">
+                    </label>
+                    <label>Lokalizacja
+                        <select name="location">
+                            <option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option>
+                            <option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option>
+                        </select>
+                    </label>
+                    <label>Data dostawy
+                        {{if .ID}}
+                        <input type="date" name="date" value="{{.Date.Format "2006-01-02"}}" required>
+                        {{else}}
+                        <input type="date" name="date" required>
+                        {{end}}
+                    </label>
+                    <label>Status
+                        <select name="status">
+                            <option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
+                            <option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
+                        </select>
+                    </label>
+                    <label>Zaliczka
+                        <input type="number" name="paid" min="0" value="{{.Prepaid}}">
+                    </label>
+                </div>
+                <div>
+                    <h2>Dodane Ciasta</h2>
+                    <div class="scrollable">
+                        <table id="basket_table" >
+                        </table>
+                    </div>
+                    <ul id="basket"  class="scrollable">
+                    </ul>
+                </div>
+
+                <div>
+                    <label>
+                        <small>Total:</small><br>
+                        <p id="total-price">100PLN</p>
+                    </label>
+                    <button type="submit">Zapisz</button>
+                </div>
+            </div>
+            {{end}}
+            {{with .Catalogue}}
+                <div>
+                    <h2>Katalog</h2>
+                    <div class="scrollable">
+                        <table>
+                            {{range .}}
+                            <tr>
+                                <th>{{.Name}}<br><small>#{{.ID}}</small></th>
+                                <th>{{.Price}}PLN</th>
+                                <th>
+                                    <button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
+                                        <i class="fa-solid fa-plus"></i>
+                                    </button>
+                                </th>
+                            </tr>
+                            {{end}}
+                        </table>
+                    </div>
+                </div>
+            {{end}}
+        </form>
+    </main>
+    <template id="basket_element_template">
+        <tr>
+            <th class="cake-name">Name</th>
+            <th class="cake-price">Price</th>
+            <th>
+                <label>
+                    <input type="number" min="0">
+                </label>
+            </th>
+            <th class="cake-total">Total</th>
+            <th>
+                <button type=button>
+                    <i class="fa-solid fa-minus"></i>
+                </button>
+            </th>
+        </tr>
+    </template>
+    <script>
+        {{range .Order.OrderItems}}
+        addCake({{.ProductID}},{{.Product.Name}}, {{.Product.Price}}, {{.Amount}})
+        {{end}}
+    </script>
+{{end}}

templates/pages/orders.gohtml

@@ -0,0 +1,71 @@
+{{define "title"}}
+Zamówienia
+{{end}}
+{{define "main"}}
+<main>
+    <form class="search-container" hx-get="/orders/search" hx-target="#results-table"
+        hx-trigger="keyup delay:500ms, change">
+        <label>Data początkowa
+            <input type="date" value="{{.First}}" name="from">
+        </label>
+        <label>Data końcowa
+            <input type="date" value="{{.Last}}" name="to">
+        </label>
+    </form>
+    <div id="results-table" class="scrollable">
+        {{template "orders-table" .Orders}}
+    </div>
+</main>
+<style>
+    .hidden {
+        display: none;
+    }
+
+    .active {
+        background-color: #e6f2ff;
+    }
+</style>
+{{end}}
+{{define "orders-table"}}
+<table id="orders_table">
+    <thead>
+        <tr>
+            <th>Numer zamówienia</th>
+            <th>Klient</th>
+            <th>Lokalizacja</th>
+            <th>Data zamówienia</th>
+            <th>Pozostało do zapłaty</th>
+            <th>Status</th>
+        </tr>
+    </thead>
+    <tbody>
+        {{range .}}
+        <tr class="clickable" onclick="toggleDetails(this)">
+            <th><a href="/order/{{.ID}}">#{{.ID}}</a></th>
+            <th>{{.Surname}} {{.Name}} {{.Phone}}</th>
+            <th>{{.Location}}</th>
+            <th>{{.Date.Format "2006-01-02"}}</th>
+            <th>{{.Total}} PLN</th>
+            <th>{{.Status}}</th>
+        </tr>
+        <tr class="hidden">
+            <td colspan="6" class="details-content">
+            {{template "order_info" .}}
+            </td>
+        </tr>
+        {{end}}
+    </tbody>
+</table>
+{{end}}
+{{define "order_info"}}
+    <table>
+        {{range .OrderItems}}
+        <tr>
+            <th>{{.Product.Name}}<br><small>ID: {{.ProductID}}</small></th>
+            <th><small>Cena:</small><br>{{.Product.Price}} PLN</th>
+            <th><small>Ilość:</small><br>{{.Amount}}</th>
+            <th><small>Razem:</small><br>{{.Total}} PLN</th>
+        </tr>
+        {{end}}
+    </table>
+{{end}}