eshop

assets/views/shop/index.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block title %}{{ t(key="nav-shop", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="space-y-8">
+  <header class="space-y-2">
+    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
+    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
+  </header>
+
+  {% if categories | length > 0 %}
+  <div class="flex flex-wrap gap-2">
+    {% for category in categories %}
+    <a href="/category/{{ category.slug }}"
+      class="rounded-full border border-outline px-3 py-1 text-sm font-medium text-on-surface transition hover:border-primary hover:text-primary dark:border-outline-dark dark:text-on-surface-dark dark:hover:border-primary-dark dark:hover:text-primary-dark">{{ category.name }}</a>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {% if products | length > 0 %}
+  <div class="grid grid-cols-2 gap-5 sm:grid-cols-3 lg:grid-cols-4">
+    {% for product in products %}
+    {% include "shop/_card.html" %}
+    {% endfor %}
+  </div>
+  {% else %}
+  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
+    {{ t(key="shop-empty", lang=lang | default(value='sk')) }}
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}