80 lines
5.1 KiB
HTML
80 lines
5.1 KiB
HTML
{% extends "base.html" %}
|
|
{% import "macros/ui.html" as ui %}
|
|
|
|
{% block title %}{{ product.name }}{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="grid gap-10 lg:grid-cols-2">
|
|
<!-- gallery — prev/next arrows + opacity transitions adapted from
|
|
penguinui/carousel/default-carousel.html; kept our product thumbnail strip
|
|
(more useful than carousel dots for a product) and 0-based `active` -->
|
|
<div x-data="{ active: 0, count: {{ images | length }},
|
|
prev() { this.active = this.active > 0 ? this.active - 1 : this.count - 1 },
|
|
next() { this.active = this.active < this.count - 1 ? this.active + 1 : 0 } }"
|
|
class="space-y-4">
|
|
<div class="relative aspect-square overflow-hidden rounded-radius border border-outline bg-surface-alt dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
{% if images | length > 0 %}
|
|
{% for image in images %}
|
|
<img x-show="active === {{ loop.index0 }}" x-transition.opacity.duration.300ms src="/images/{{ image }}" alt="{{ product.name }}" class="absolute inset-0 size-full object-cover">
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% if images | length > 1 %}
|
|
<!-- previous slide -->
|
|
<button type="button" @click="prev()" aria-label="{{ t(key='gallery-prev', lang=lang | default(value='sk')) }}"
|
|
class="absolute left-3 top-1/2 z-10 flex -translate-y-1/2 items-center justify-center rounded-full bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
<!-- next slide -->
|
|
<button type="button" @click="next()" aria-label="{{ t(key='gallery-next', lang=lang | default(value='sk')) }}"
|
|
class="absolute right-3 top-1/2 z-10 flex -translate-y-1/2 items-center justify-center rounded-full bg-surface/40 p-2 text-on-surface transition hover:bg-surface/60 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-surface-dark/40 dark:text-on-surface-dark dark:hover:bg-surface-dark/60 dark:focus-visible:outline-primary-dark">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
{% if images | length > 1 %}
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for image in images %}
|
|
<button type="button" @click="active = {{ loop.index0 }}"
|
|
:class="active === {{ loop.index0 }} ? 'border-primary dark:border-primary-dark' : 'border-outline dark:border-outline-dark'"
|
|
class="size-16 overflow-hidden rounded-radius border">
|
|
<img src="/images/{{ image }}" alt="" class="size-full object-cover">
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- details -->
|
|
<div class="space-y-6">
|
|
{% if category %}
|
|
<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>
|
|
<p class="text-2xl font-semibold text-primary dark:text-primary-dark">{{ product.price }} {{ product.currency }}</p>
|
|
|
|
{% if product.description %}
|
|
<div class="whitespace-pre-line leading-relaxed text-on-surface/80 dark:text-on-surface-dark/80">{{ product.description }}</div>
|
|
{% endif %}
|
|
|
|
{% if product.stock > 0 %}
|
|
<form method="post" action="/cart/add" hx-post="/cart/add" hx-swap="none" class="flex flex-wrap items-end gap-3"
|
|
hx-on::after-request="if (event.detail.successful) toast('{{ t(key='cart-added', lang=lang | default(value='sk')) }}')">
|
|
<input type="hidden" name="product_id" value="{{ product.id }}">
|
|
<div class="space-y-1.5">
|
|
<label for="quantity" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="quantity", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="quantity", id="quantity", type="number", value="1", width="w-24", attrs='min="1" max="' ~ product.stock ~ '"') }}
|
|
</div>
|
|
{{ ui::button(label=t(key="add-to-cart", lang=lang | default(value='sk')), type="submit", size="px-5 py-2 text-sm") }}
|
|
</form>
|
|
<p class="text-sm text-on-surface/60 dark:text-on-surface-dark/60">{{ t(key="in-stock", lang=lang | default(value='sk')) }}: {{ product.stock }}</p>
|
|
{% else %}
|
|
<p class="inline-flex rounded-radius bg-danger/10 px-3 py-2 text-sm font-medium text-danger">{{ t(key="out-of-stock", lang=lang | default(value='sk')) }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|