@php
    $url = $url ?? null;
@endphp

@if ($url)
    <div class="rounded-2xl border border-gray-200/80 bg-white/70 p-4 shadow-sm ring-1 ring-black/5 dark:border-white/10 dark:bg-white/5">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Galerie-Link</p>
                <p class="mt-1 break-all font-semibold text-gray-900 dark:text-white">{{ $url }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <button
                    type="button"
                    onclick="navigator.clipboard.writeText('{{ $url }}')"
                    class="rounded-xl border border-gray-200 bg-white px-3 py-2 text-sm font-semibold text-gray-800 shadow-sm transition hover:border-emerald-300 hover:text-emerald-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400 dark:border-white/20 dark:bg-white/10 dark:text-white"
                >
                    Kopieren
                </button>
            </div>
        </div>
        <div class="mt-4 flex justify-center">
            <div class="flex flex-col items-center gap-2">
                <div class="rounded-lg border border-gray-200 bg-white p-2 shadow-sm dark:border-white/20 dark:bg-white/5">
                    {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(200)->margin(1)->generate($url) !!}
                </div>
                <a
                    href="data:image/png;base64,{{ base64_encode(\SimpleSoftwareIO\QrCode\Facades\QrCode::format('png')->size(400)->margin(1)->generate($url)) }}"
                    download="gallery-qr.png"
                    class="text-sm font-semibold text-emerald-600 underline underline-offset-4 hover:text-emerald-700 dark:text-emerald-300"
                >
                    QR als PNG herunterladen
                </a>
            </div>
        </div>
    </div>
@endif