move to templ

server/templates/cakes.templ

@@ -0,0 +1,70 @@
+package templates
+
+import (
+	"strconv"
+
+	"git.bronku.xyz/bronku/cake-order-tracker/models"
+)
+
+templ CakesPage(cakes []models.Cake) {
+	@Layout("Katalog", CakesMain(cakes))
+}
+
+templ CakesMain(cakes []models.Cake) {
+	<section class="card">
+		<div class="card-header">
+			<h2>
+				<span class="material-symbols-outlined">inventory_2</span>
+				Zarządzanie katalogiem
+			</h2>
+			<a href="/cake" class="btn btn-primary btn-sm">
+				<span class="material-symbols-outlined">add</span>
+				Nowe ciasto
+			</a>
+		</div>
+		<div class="table-container">
+			<table class="data-table">
+				<thead>
+					<tr>
+						<th style="width:32px"></th>
+						<th>Nazwa</th>
+						<th>SKU</th>
+						<th class="right">Cena bazowa</th>
+						<th class="center"></th>
+					</tr>
+				</thead>
+				<tbody>
+					for _, c := range cakes {
+						<tr>
+							<td>
+								<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
+									<span class="material-symbols-outlined" style="font-size:14px">cake</span>
+								</div>
+							</td>
+							<td style="font-weight:500">{ c.Name }</td>
+							<td class="text-on-surface-variant">#{ strconv.Itoa(c.ID) }</td>
+							<td class="text-right">{ strconv.Itoa(c.Price) } PLN</td>
+							<td class="text-center">
+								<a href={ templ.URL("/cake/" + strconv.Itoa(c.ID)) } class="action-btn">
+									<span class="material-symbols-outlined">edit</span>
+								</a>
+							</td>
+						</tr>
+					}
+				</tbody>
+			</table>
+		</div>
+		<div class="table-footer">
+			<span>Pokazuje 1-{ strconv.Itoa(len(cakes)) } z { strconv.Itoa(len(cakes)) }</span>
+			<div class="pagination">
+				<button class="pagination-btn" disabled>
+					<span class="material-symbols-outlined">chevron_left</span>
+				</button>
+				<button class="pagination-btn active">1</button>
+				<button class="pagination-btn" disabled>
+					<span class="material-symbols-outlined">chevron_right</span>
+				</button>
+			</div>
+		</div>
+	</section>
+}