dialog to ask if remove item compltely

assets/i18n/en/main.ftl

@@ -215,6 +215,7 @@ cart-empty = Your cart is empty.
 cart-total = Total
 cart-checkout = Proceed to checkout
 cart-remove = Remove
+cart-remove-confirm = Remove this item from the cart?
 cart-update = Update
 cart-continue = Continue shopping
 checkout-title = Checkout

assets/i18n/sk/main.ftl

@@ -215,6 +215,7 @@ cart-empty = Váš košík je prázdny.
 cart-total = Spolu
 cart-checkout = Pokračovať k pokladni
 cart-remove = Odstrániť
+cart-remove-confirm = Odstrániť túto položku z košíka?
 cart-update = Aktualizovať
 cart-continue = Pokračovať v nákupe
 checkout-title = Pokladňa

assets/views/shop/_cart_body.html

@@ -21,11 +21,20 @@
         </td>
         <td class="px-4 py-3 tabular-nums">{{ item.price }} {{ item.currency }}</td>
         <td class="px-4 py-3">
-          {# Changing the quantity posts via htmx and swaps only #cart-body. #}
+          {# Changing the quantity posts via htmx (custom `cartchange` event) and
+             swaps only #cart-body. Dropping to 0 asks for confirmation first,
+             reverting to the previous quantity if the customer cancels. #}
           <form method="post" action="/cart/update"
-            hx-post="/cart/update" hx-trigger="change" hx-target="#cart-body" hx-swap="innerHTML">
+            hx-post="/cart/update" hx-trigger="cartchange" hx-target="#cart-body" hx-swap="innerHTML">
             <input type="hidden" name="product_id" value="{{ item.id }}">
             <input type="number" name="quantity" min="0" max="{{ item.stock }}" value="{{ item.quantity }}"
+              @change="
+                if (parseInt($el.value || '0') <= 0 && !window.confirm('{{ t(key='cart-remove-confirm', lang=lang | default(value='sk')) }}')) {
+                  $el.value = '{{ item.quantity }}';
+                } else {
+                  $el.dispatchEvent(new Event('cartchange', { bubbles: true }));
+                }
+              "
               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">
           </form>
         </td>