@php
    $shareUrl  = $qrCode->publicUrl();
    $shareEnc  = urlencode($shareUrl);
    $shareText = urlencode($qrCode->label . ' — pay with QR');
@endphp
<div class="flex flex-wrap items-center gap-2">
    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'png']) }}"
       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">PNG</a>
    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'svg']) }}"
       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">SVG</a>
    <a href="{{ route('mini.payment-qrs.download', [$qrCode, 'pdf']) }}"
       class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">PDF</a>
    <div class="relative" x-data="{ open: false, copied: false }" @click.outside="open = false">
        <button type="button"
                @click="if(navigator.share){navigator.share({title:@js($qrCode->label),url:@js($shareUrl)}).catch(()=>{open=!open})}else{open=!open}"
                class="rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-50">
            Share
        </button>
        <div x-show="open" x-cloak
             x-transition:enter="transition ease-out duration-100"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             class="absolute right-0 z-50 mt-2 w-52 origin-top-right rounded-xl border border-slate-200 bg-white p-1.5 shadow-xl">
            <a href="https://wa.me/?text={{ $shareText }}%20{{ $shareEnc }}" target="_blank" rel="noopener"
               @click="open = false"
               class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-slate-700 transition hover:bg-slate-50">
                WhatsApp
            </a>
            <button type="button"
                    @click="navigator.clipboard.writeText(@js($shareUrl)).then(() => { copied = true; setTimeout(() => { copied = false; open = false }, 1500) })"
                    class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm transition hover:bg-slate-50"
                    :class="copied ? 'text-emerald-600' : 'text-slate-700'">
                <span x-text="copied ? 'Copied!' : 'Copy link'">Copy link</span>
            </button>
        </div>
    </div>
</div>