{{--
    Locale bar for LocaleTabs: switches which locale copy is shown via `x-show` on each copy's
    wrapper (set on the ancestor Group by LocaleTabs::make()). No Livewire round trip.

    Unlike LocaleSwapEditor's bar, this one doesn't talk to any JS plugin or mirror any state:
    every locale copy is a REAL Filament field, already wired to its own wire:model, so there is
    nothing to copy on switch — just toggle which one is painted. Same visual design as the hero
    bar on purpose (docs/CLAUDE-PANEL-RENDIMIENTO.md §15), so every locale switcher in the panel
    looks the same regardless of which mechanism is behind it.
--}}
<div class="flex flex-wrap items-center gap-2">
    <div
        style="display: inline-flex; align-items: stretch; border-radius: 0.5rem; overflow: hidden;
               box-shadow: 0 0 0 1px rgba(var(--gray-400), 0.35);"
    >
        <template x-for="(code, i) in @js($locales)" :key="code">
            <button
                type="button"
                x-on:click="locale = code"
                x-text="code.replace('_', '-').toUpperCase()"
                :title="code"
                {{-- Todo el estilo va en el :style: Alpine reemplaza el atributo style estático,
                     igual que en locale-swap-bar.blade.php. --}}
                :style="(locale === code
                        ? 'background: rgba(var(--primary-600), 1); color: #fff; font-weight: 600;'
                        : 'background: transparent; color: rgba(var(--gray-400), 1); font-weight: 500;')
                    + 'padding: 0.55rem 1rem; font-size: 0.875rem; line-height: 1.2; min-width: 3.75rem;'
                    + 'border: 0; cursor: pointer; letter-spacing: .02em;'
                    + 'transition: background-color .12s ease, color .12s ease;'"
                :class="i > 0 ? 'itg-locale-btn itg-locale-btn--divided' : 'itg-locale-btn'"
            ></button>
        </template>
    </div>
</div>