<div class="space-y-4"
     @if($svg)
        {{-- Refresh a little before the code rotates, so the screen in someone's
             hand is never the stale one. --}}
        wire:poll.{{ max(5, $secondsLeft) }}s
     @endif>

    @if($error)
        <x-portal.card>
            <x-portal.empty :title="__('البطاقة غير متاحة')" :body="$error" />
        </x-portal.card>
    @elseif(! $svg)
        <x-portal.card>
            <x-portal.empty :title="__('لا يوجد عضو محدد')" />
        </x-portal.card>
    @else
        <div class="portal-card flex flex-col items-center gap-3 px-4 py-6">
            <p class="text-sm font-bold">{{ $participant?->person?->name_ar ?? $participant?->person?->name }}</p>

            {{-- Rendered server-side, inline. No CDN, no third party sees the
                 token, and it works when the venue's wifi does not. --}}
            <div class="rounded-2xl bg-white p-3" style="box-shadow: 0 1px 3px rgba(0,0,0,.08);">
                {!! $svg !!}
            </div>

            <p class="text-xs" style="color: var(--portal-muted);">
                {{ __('اعرض هذا الرمز على موظف الاستقبال لتسجيل الحضور') }}
            </p>
            <p class="num text-[11px]" style="color: var(--portal-muted);">
                {{ __('يتجدد الرمز خلال') }} {{ $secondsLeft }} {{ __('ثانية') }}
            </p>
        </div>

        <x-portal.card>
            <p class="text-xs leading-relaxed" style="color: var(--portal-muted);">
                {{ __('هذا الرمز يثبت هويتك فقط، ولا يمنح أي صلاحية. يتم التحقق من التسجيل والحالة والحصة عند المسح، ويصلح الرمز لمرة واحدة.') }}
            </p>
        </x-portal.card>
    @endif
</div>
