{{-- One link per language: a draft translated into two has two addresses, and
     whoever is reviewing the Catalan one needs that one. --}}
<div class="space-y-3">
    @foreach ($links as $language => $url)
        <div class="space-y-1">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">{{ $language }}</p>

            <div class="flex items-center gap-2">
                {{-- Readonly and click/focus-to-select rather than a plain
                     display of the URL: copying it is the entire point of
                     this field, for a mouse and a keyboard alike. Its own
                     `aria-label` names it explicitly — the language above is
                     a separate element with no `for`/`id` link to this one,
                     so a screen reader landing directly on the input would
                     otherwise hear only "text, read only". --}}
                <input
                    type="text"
                    readonly
                    value="{{ $url }}"
                    onclick="this.select()"
                    onfocus="this.select()"
                    aria-label="{{ __('panel.preview.link_for', ['language' => $language]) }}"
                    class="fi-input w-full rounded-lg border-gray-300 bg-gray-50 px-3 py-2 font-mono text-xs text-gray-700 dark:border-white/10 dark:bg-white/5 dark:text-gray-300"
                />

                {{-- `noopener`: the page it opens runs on the public site's
                     origin, and a target="_blank" link without it hands that
                     page a live reference back to this one (`window.opener`).
                     The visually-hidden text is for whoever is not looking at
                     the screen — a new tab opening is a context change
                     nothing else here announces. --}}
                <x-filament::button
                    tag="a"
                    href="{{ $url }}"
                    target="_blank"
                    rel="noopener"
                    size="sm"
                    color="gray"
                >
                    {{ __('panel.preview.open') }}
                    <span class="sr-only">{{ __('panel.preview.opens_new_tab') }}</span>
                </x-filament::button>
            </div>
        </div>
    @endforeach
</div>