eshop

assets/views/shop/cart.html

@@ -0,0 +1,67 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="cart-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="space-y-6">
+  <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="cart-title", lang=lang | default(value='sk')) }}</h1>
+
+  {% if items | length > 0 %}
+  <div class="overflow-hidden rounded-radius border border-outline dark:border-outline-dark">
+    <table class="w-full text-left text-sm">
+      <thead class="border-b border-outline bg-surface-alt text-xs uppercase tracking-wide text-on-surface/70 dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark/70">
+        <tr>
+          <th class="px-4 py-3 font-semibold">{{ t(key="product", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 font-semibold">{{ t(key="price", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 font-semibold">{{ t(key="quantity", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3 text-right font-semibold">{{ t(key="cart-total", lang=lang | default(value='sk')) }}</th>
+          <th class="px-4 py-3"></th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-outline dark:divide-outline-dark">
+        {% for item in items %}
+        <tr>
+          <td class="px-4 py-3">
+            <a href="/shop/{{ item.slug }}" class="font-medium text-on-surface-strong hover:text-primary dark:text-on-surface-dark-strong dark:hover:text-primary-dark">{{ item.name }}</a>
+          </td>
+          <td class="px-4 py-3 tabular-nums">{{ item.price }} {{ item.currency }}</td>
+          <td class="px-4 py-3">
+            <form method="post" action="/cart/update" hx-boost="false" class="flex items-center gap-2">
+              <input type="hidden" name="product_id" value="{{ item.id }}">
+              <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}"
+                class="w-20 rounded-radius border border-outline bg-surface px-2 py-1 text-sm text-on-surface focus:outline-2 focus:outline-primary dark:border-outline-dark dark:bg-surface-dark dark:text-on-surface-dark">
+              <button type="submit" class="rounded-radius border border-outline px-2 py-1 text-xs font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-update", lang=lang | default(value='sk')) }}</button>
+            </form>
+          </td>
+          <td class="px-4 py-3 text-right font-medium tabular-nums">{{ item.line_total }} {{ item.currency }}</td>
+          <td class="px-4 py-3 text-right">
+            <form method="post" action="/cart/remove" hx-boost="false">
+              <input type="hidden" name="product_id" value="{{ item.id }}">
+              <button type="submit" class="text-xs font-medium text-danger hover:underline">{{ t(key="cart-remove", lang=lang | default(value='sk')) }}</button>
+            </form>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+      <tfoot class="border-t border-outline dark:border-outline-dark">
+        <tr>
+          <td colspan="3" class="px-4 py-3 text-right font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="cart-total", lang=lang | default(value='sk')) }}</td>
+          <td class="px-4 py-3 text-right text-lg font-bold tabular-nums text-primary dark:text-primary-dark">{{ total }} {{ currency }}</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+
+  <div class="flex flex-wrap justify-between gap-3">
+    <a href="/shop" class="inline-flex items-center rounded-radius border border-outline px-4 py-2 text-sm font-medium text-on-surface transition hover:bg-surface-alt dark:border-outline-dark dark:text-on-surface-dark dark:hover:bg-surface-dark-alt">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+    <a href="/checkout" class="inline-flex items-center justify-center rounded-radius bg-primary px-5 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-checkout", lang=lang | default(value='sk')) }}</a>
+  </div>
+  {% else %}
+  <div class="rounded-radius border border-outline px-6 py-16 text-center dark:border-outline-dark">
+    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="cart-empty", lang=lang | default(value='sk')) }}</p>
+    <a href="/shop" class="mt-4 inline-flex items-center justify-center rounded-radius bg-primary px-4 py-2 text-sm font-medium text-on-primary transition hover:opacity-75 dark:bg-primary-dark dark:text-on-primary-dark">{{ t(key="cart-continue", lang=lang | default(value='sk')) }}</a>
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}