{# 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-sm">
        {% 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>