{# Mini-cart preview shown on hover over the navbar cart (Alza-style).
   Lazy-loaded via htmx from /partials/cart into the hover dropdown panel in
   base.html. Receives: items[], total, lang. #}
{% import "macros/ui.html" as ui %}
{% if items | length > 0 %}
<div class="max-h-80 divide-y divide-outline overflow-y-auto dark:divide-outline-dark">
  {% for item in items %}
  <div class="flex items-start gap-3 px-4 py-3">
    <div class="min-w-0 flex-1">
      <a href="/shop/{{ item.slug }}" class="block truncate text-sm font-medium text-on-surface-strong hover:text-primary dark:text-on-surface-dark-strong dark:hover:text-primary-dark">{{ item.name }}</a>
      {% if item.variant_label %}<span class="block truncate text-xs text-on-surface/60 dark:text-on-surface-dark/60">{{ item.variant_label }}</span>{% endif %}
      {% if item.out_of_stock %}<span class="mt-0.5 inline-flex items-center rounded-radius bg-danger/10 px-1.5 py-0.5 text-xs font-medium text-danger">{{ t(key="cart-out-of-stock", lang=lang | default(value='sk')) }}</span>
      {% else %}<p class="mt-0.5 text-xs tabular-nums text-on-surface dark:text-on-surface-dark">{{ item.quantity }} × {{ item.price }} {{ currency_symbol }}</p>{% endif %}
    </div>
    <span class="shrink-0 text-sm font-semibold tabular-nums text-on-surface-strong dark:text-on-surface-dark-strong">{% if item.out_of_stock %}<span class="text-on-surface/40 dark:text-on-surface-dark/40">—</span>{% else %}{{ item.line_total }} {{ currency_symbol }}{% endif %}</span>
  </div>
  {% endfor %}
</div>
<div class="border-t border-outline px-4 py-3 dark:border-outline-dark">
  <div class="mb-3 flex items-center justify-between">
    <span class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="cart-total", lang=lang | default(value='sk')) }}</span>
    <span class="text-base font-bold tabular-nums text-primary dark:text-primary-dark">{{ total }} {{ currency_symbol }}</span>
  </div>
  <div class="flex gap-2">
    {{ ui::button(href="/cart", variant="outline-primary", label=t(key="cart-title", lang=lang | default(value='sk')), extra="flex-1", attrs='hx-boost="false"') }}
    {% if has_unavailable %}
    {{ ui::button(variant="primary", label=t(key="cart-checkout", lang=lang | default(value='sk')), extra="flex-1 opacity-50 cursor-not-allowed pointer-events-none", attrs='disabled aria-disabled="true"') }}
    {% else %}
    {{ ui::button(href="/checkout", variant="primary", label=t(key="cart-checkout", lang=lang | default(value='sk')), extra="flex-1", attrs='hx-boost="false"') }}
    {% endif %}
  </div>
</div>
{% else %}
<div class="px-4 py-10 text-center text-sm text-on-surface dark:text-on-surface-dark">
  {{ t(key="cart-empty", lang=lang | default(value='sk')) }}
</div>
{% endif %}