@php
    $url = $url ?? route('gallery.show', $record);
    $path = $record?->images_path ?? 'uploads';
@endphp

<div class="space-y-4">
    <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">
        <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 class="mt-2 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="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">
        <p class="text-xs uppercase tracking-[0.3em] text-gray-500 dark:text-gray-300">Upload-Pfad</p>
        <p class="mt-1 font-mono text-sm text-gray-800 dark:text-gray-200">storage/{{ $path }}</p>
    </div>

    <div class="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(220)->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>