{% extends 'htmx_modal.html.twig' %}

{% block title %}Vorschau{% endblock %}

{% block content %}
    {% if not previewable %}
        <div class="pb-4">
            Für die Vorschau bitte zuerst Motiv, Von, Für und Gutscheinwert angeben.
        </div>
    {% else %}
        {% set previewUrl = path('app_voucher_preview_pdf', { v: previewVersion }) %}
        {# BusPro renders the PDF on demand, which takes a few seconds #}
        <div class="relative" {{ stimulus_controller('frame-loading', { src: previewUrl }) }}>
            <iframe title="Vorschau deines Gutscheins"
                    class="w-full h-[70vh] border border-primary-bg"
                    {{ stimulus_target('frame-loading', 'frame') }}></iframe>
            <div class="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-white"
                 {{ stimulus_target('frame-loading', 'indicator') }}>
                {% include '_partials/_spinner.html.twig' with { class: 'w-24 h-24' } %}
                <span>Die Vorschau wird erstellt …</span>
            </div>
        </div>
        <div class="pt-4">
            <a href="{{ previewUrl }}" target="_blank" rel="noopener" hx-boost="false" class="underline">
                Vorschau in neuem Fenster öffnen
            </a>
        </div>
    {% endif %}
{% endblock %}