discounts

assets/views/admin/base.html

@@ -78,6 +78,10 @@
           class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
           {{ t(key="admin-products", lang=lang | default(value='sk')) }}
         </a>
+        <a href="/admin/catalog/discounts" data-nav="/admin/catalog/discounts"
+          class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
+          {{ t(key="admin-discounts", lang=lang | default(value='sk')) }}
+        </a>
         <a href="/admin/catalog/categories" data-nav="/admin/catalog/categories"
           class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-on-surface-strong focus:outline-hidden focus-visible:underline aria-[current=page]:bg-primary/10 aria-[current=page]:text-on-surface-strong dark:text-on-surface-dark dark:hover:bg-primary-dark/5 dark:hover:text-on-surface-dark-strong dark:aria-[current=page]:bg-primary-dark/10 dark:aria-[current=page]:text-on-surface-dark-strong">
           {{ t(key="admin-categories", lang=lang | default(value='sk')) }}

assets/views/admin/catalog/discount_form.html

@@ -0,0 +1,39 @@
+{% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{% block title %}{{ t(key="set-discount", lang=lang | default(value='sk')) }}{% endblock title %}
+{% block crumb %}{{ t(key="admin-discounts", lang=lang | default(value='sk')) }}{% endblock crumb %}
+
+{% block content %}
+<div class="flex items-center justify-between gap-3">
+  <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
+  {{ ui::button(variant="outline-secondary", label=t(key="cancel", lang=lang | default(value='sk')), href="/admin/catalog/discounts", size="px-3 py-2 text-sm") }}
+</div>
+
+<form method="post" action="/admin/catalog/discounts/{{ product.id }}"
+  class="mt-6 max-w-md space-y-5 rounded-radius border border-outline bg-surface p-6 dark:border-outline-dark dark:bg-surface-dark-alt">
+  {{ ui::csrf_field() }}
+
+  {% if error %}
+  {{ ui::alert_danger(message=t(key=error, lang=lang | default(value='sk'))) }}
+  {% endif %}
+
+  <div class="flex items-center justify-between gap-3 rounded-radius bg-surface-alt px-4 py-3 dark:bg-surface-dark/40">
+    <span class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="price", lang=lang | default(value='sk')) }}</span>
+    <span class="font-semibold tabular-nums text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.regular_price }} {{ product.currency }}</span>
+  </div>
+
+  <div class="space-y-1.5">
+    <label for="sale_price" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="sale-price", lang=lang | default(value='sk')) }}</label>
+    {{ ui::input(name="sale_price", id="sale_price", value=value, placeholder="0.00", attrs='inputmode="decimal"') }}
+    <p class="text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="discount-hint", lang=lang | default(value='sk')) }}</p>
+  </div>
+
+  <div class="flex flex-wrap gap-3 pt-2">
+    {{ ui::button(label=t(key="save", lang=lang | default(value='sk')), type="submit") }}
+    {% if product.on_sale %}
+    {{ ui::button(variant="outline-danger", label=t(key="remove-discount", lang=lang | default(value='sk')), type="submit", attrs='formaction="/admin/catalog/discounts/' ~ product.id ~ '/remove"') }}
+    {% endif %}
+  </div>
+</form>
+{% endblock content %}

assets/views/admin/catalog/discounts.html

@@ -0,0 +1,70 @@
+{% extends "admin/base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{% block title %}{{ t(key="admin-discounts", lang=lang | default(value='sk')) }}{% endblock title %}
+{% block crumb %}{{ t(key="admin-discounts", lang=lang | default(value='sk')) }}{% endblock crumb %}
+
+{% block content %}
+<div class="flex flex-wrap items-end justify-between gap-3">
+  <div>
+    <h1 class="text-2xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="admin-discounts", lang=lang | default(value='sk')) }}</h1>
+    <p class="text-sm text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-discounts-desc", lang=lang | default(value='sk')) }}</p>
+  </div>
+</div>
+
+<div class="mt-6 {{ ui::table_wrap_cls() }}">
+  {% if products | length > 0 %}
+  <table class="{{ ui::table_cls() }}">
+    <thead class="{{ ui::thead_cls() }}">
+      <tr>
+        {{ ui::th(label=t(key="product", lang=lang | default(value='sk'))) }}
+        {{ ui::th(label=t(key="price", lang=lang | default(value='sk'))) }}
+        {{ ui::th(label=t(key="sale-price", lang=lang | default(value='sk'))) }}
+        {{ ui::th(label=t(key="status", lang=lang | default(value='sk'))) }}
+        {{ ui::th(label=t(key="actions", lang=lang | default(value='sk')), align="text-right") }}
+      </tr>
+    </thead>
+    <tbody class="{{ ui::tbody_cls() }}">
+      {% for product in products %}
+      <tr class="{{ ui::row_cls() }}">
+        <td class="px-4 py-3">
+          <div class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</div>
+        </td>
+        <td class="px-4 py-3 tabular-nums">{{ product.regular_price }} {{ product.currency }}</td>
+        <td class="px-4 py-3 tabular-nums">
+          {% if product.on_sale %}
+          <span class="font-medium text-danger">{{ product.sale_price }} {{ product.currency }}</span>
+          <span class="ml-1 text-xs text-on-surface/60 dark:text-on-surface-dark/60">(−{{ product.percent_off }}%)</span>
+          {% else %}
+          <span class="text-on-surface/40 dark:text-on-surface-dark/40">—</span>
+          {% endif %}
+        </td>
+        <td class="px-4 py-3">
+          {% if product.on_sale %}
+          {{ ui::badge(label=t(key="on-sale", lang=lang | default(value='sk')), variant="danger") }}
+          {% else %}
+          {{ ui::badge(label=t(key="no-discount", lang=lang | default(value='sk')), variant="neutral") }}
+          {% endif %}
+        </td>
+        <td class="px-4 py-3">
+          <div class="flex flex-wrap justify-end gap-2">
+            {{ ui::button(variant="outline-secondary", label=t(key="set-discount", lang=lang | default(value='sk')), href="/admin/catalog/discounts/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
+            {% if product.on_sale %}
+            <form method="post" action="/admin/catalog/discounts/{{ product.id }}/remove">
+              {{ ui::csrf_field() }}
+              {{ ui::button(variant="outline-danger", label=t(key="remove-discount", lang=lang | default(value='sk')), type="submit", size="px-3 py-1.5 text-xs") }}
+            </form>
+            {% endif %}
+          </div>
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+  {% else %}
+  <div class="flex flex-col items-center gap-3 px-4 py-16 text-center">
+    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="admin-no-products", lang=lang | default(value='sk')) }}</p>
+  </div>
+  {% endif %}
+</div>
+{% endblock content %}

assets/views/admin/catalog/products.html

@@ -41,7 +41,14 @@
             </div>
           </div>
         </td>
-        <td class="px-4 py-3 tabular-nums">{{ product.price }} {{ product.currency }}</td>
+        <td class="px-4 py-3 tabular-nums">
+          {% if product.on_sale %}
+          <span class="font-medium text-danger">{{ product.price }} {{ product.currency }}</span>
+          <span class="text-xs text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }}</span>
+          {% else %}
+          {{ product.price }} {{ product.currency }}
+          {% endif %}
+        </td>
         <td class="px-4 py-3 tabular-nums">{{ product.stock }}</td>
         <td class="px-4 py-3">
           {% if product.published %}
@@ -53,6 +60,7 @@
         <td class="px-4 py-3">
           <div class="flex flex-wrap justify-end gap-2">
             {{ ui::button(variant="outline-secondary", label=t(key="edit", lang=lang | default(value='sk')), href="/admin/catalog/products/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
+            {{ ui::button(variant="outline-secondary", label=t(key="set-discount", lang=lang | default(value='sk')), href="/admin/catalog/discounts/" ~ product.id ~ "/edit", size="px-3 py-1.5 text-xs") }}
             {{ ui::button(variant="outline-secondary", label=t(key="view", lang=lang | default(value='sk')), href="/shop/" ~ product.slug, size="px-3 py-1.5 text-xs") }}
             <form method="post" action="/admin/catalog/products/{{ product.id }}/delete"
               onsubmit="return confirm('{{ t(key="confirm-delete", lang=lang | default(value='sk')) }}')">

assets/views/macros/ui.html

@@ -127,7 +127,7 @@
 
 {# Text/email/number/password input. #}
 {% macro input(name, type="text", id="", value="", placeholder="", required=false, autocomplete="", attrs="", extra="", width="w-full") -%}
-<input {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" type="{{ type }}"{% if value != "" %} value="{{ value }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} class="{{ width }} rounded-radius border border-outline bg-surface-alt px-2 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}/>
+<input {% if id %}id="{{ id }}" {% endif %}name="{{ name }}" type="{{ type }}"{% if value is number or value != "" %} value="{{ value }}"{% endif %}{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}{% if required %} required{% endif %}{% if autocomplete %} autocomplete="{{ autocomplete }}"{% endif %} class="{{ width }} rounded-radius border border-outline bg-surface-alt px-2 py-2 text-sm text-on-surface focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:cursor-not-allowed disabled:opacity-75 dark:border-outline-dark dark:bg-surface-dark-alt/50 dark:text-on-surface-dark dark:focus-visible:outline-primary-dark {{ extra }}" {{ attrs | safe }}/>
 {%- endmacro input %}
 
 {% macro textarea(name, id="", value="", rows="3", placeholder="", required=false, attrs="", extra="") -%}

assets/views/shop/_card.html

@@ -17,7 +17,14 @@
       <!-- Header: Title & Price -->
       <div class="flex justify-between gap-4">
         <h3 class="text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h3>
+        {% if product.on_sale %}
+        <span class="flex flex-col items-end whitespace-nowrap leading-tight">
+          <span class="text-sm text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</span>
+          <span class="text-xl font-semibold text-danger"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+        </span>
+        {% else %}
         <span class="whitespace-nowrap text-xl"><span class="sr-only">Price</span>{{ product.price }} {{ product.currency }}</span>
+        {% endif %}
       </div>
     </div>
   </a>

assets/views/shop/show.html

@@ -54,7 +54,14 @@
     <a href="/category/{{ category.slug }}" class="text-sm font-medium text-primary dark:text-primary-dark">{{ category.name }}</a>
     {% endif %}
     <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ product.name }}</h1>
+    {% if product.on_sale %}
+    <div class="flex items-baseline gap-3">
+      <p class="text-2xl font-semibold text-danger">{{ product.price }} {{ product.currency }}</p>
+      <p class="text-lg text-on-surface/50 line-through dark:text-on-surface-dark/50">{{ product.regular_price }} {{ product.currency }}</p>
+    </div>
+    {% else %}
     <p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
+    {% endif %}
 
     {% if product.description %}
     <div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>