59 lines
2.9 KiB
Twig
59 lines
2.9 KiB
Twig
{# Sidebar of the voucher purchase steps, in place of the booking summary #}
|
||
<div class="bg-white h-full flex flex-col lg:border-l lg:border-primary-bg">
|
||
<div class="shrink-0 px-4 lg:px-8 py-4 lg:flex lg:flex-col lg:justify-center shadow-md relative z-10">
|
||
<div class="flex items-center justify-between pb-2">
|
||
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
||
<span class="font-semibold">{{ (voucher.amount ?? 0)|format_currency('EUR') }}</span>
|
||
</div>
|
||
<div class="flex items-center justify-between">
|
||
<span class="block uppercase font-semibold">Dein Gutschein</span>
|
||
<button type="button"
|
||
class="lg:hidden button button--small bg-primary-light"
|
||
data-action="toggle#toggle">
|
||
<svg class="w-4 h-4 text-white transition-transform"
|
||
data-toggle-target="icon"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hidden lg:block flex-1 min-h-0 bg-white shadow-lg lg:shadow-none overflow-y-auto scroll-stable px-4 lg:px-8 py-8"
|
||
data-toggle-target="content">
|
||
{% if voucherThumbnail %}
|
||
<img src="{{ asset(voucherThumbnail) }}"
|
||
alt="Motiv {{ voucher.template.label }}"
|
||
class="block w-full max-w-sm h-auto mb-4 shadow">
|
||
{% endif %}
|
||
|
||
<div class="border border-primary-bg mb-4">
|
||
<div class="p-2 bg-primary-bg uppercase font-semibold">
|
||
Gutschein
|
||
</div>
|
||
<table class="w-full table-fixed">
|
||
<tr>
|
||
<td class="p-2 align-top w-24">Motiv</td>
|
||
<td class="p-2 align-top">{{ voucher.template.label ?? '–' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-2 align-top w-24">Von</td>
|
||
<td class="p-2 align-top break-words">{{ voucher.from ?: '–' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-2 align-top w-24">Für</td>
|
||
<td class="p-2 align-top break-words">{{ voucher.to ?: '–' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="p-2 align-top w-24">Wert</td>
|
||
<td class="p-2 align-top">{{ voucher.amount is not null ? voucher.amount|format_currency('EUR') : '–' }}</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="flex items-center justify-between pb-2">
|
||
<span class="block uppercase font-semibold">Gesamtpreis</span>
|
||
<span class="font-semibold">{{ (voucher.amount ?? 0)|format_currency('EUR') }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|