@props(['fields', 'values' => []])
{{-- One tab per translatable language with inputs named translations[{locale}][{field}]; fields are field => [label, text|textarea|rich]. --}}
@php($languages = \App\Models\Language::translatable()->get(['code', 'name', 'direction']))
@if ($languages->isEmpty())
    <p class="text-sm text-gray-500 dark:text-gray-400">{{ __('Activate more languages to translate this content.') }}</p>
@else
    @php($firstWithError = $languages->first(fn ($language) => $errors->has("translations.{$language->code}.*")))
    <div x-data="{ locale: {{ Js::from(($firstWithError ?? $languages->first())->code) }} }">
        <div class="mb-4 flex flex-wrap gap-2" role="tablist">
            @foreach ($languages as $language)
                <button type="button" role="tab" @click="locale = '{{ $language->code }}'" :aria-selected="locale === '{{ $language->code }}'"
                        :class="locale === '{{ $language->code }}' ? 'pill-active' : 'pill-idle'" class="pill">{{ $language->name }}</button>
            @endforeach
        </div>
        @foreach ($languages as $language)
            <div x-show="locale === '{{ $language->code }}'" x-cloak class="space-y-4" dir="{{ $language->direction }}">
                @foreach ($fields as $field => [$label, $type])
                    @php($inputName = "translations[{$language->code}][{$field}]")
                    @php($inputValue = data_get($values, "{$language->code}.{$field}"))
                    @if ($type === 'rich')
                        <x-admin.rich-text :name="$inputName" :label="$label" :value="$inputValue" :dir="$language->direction" />
                    @elseif ($type === 'textarea')
                        <x-admin.textarea :name="$inputName" :label="$label" :value="$inputValue" rows="3" />
                    @else
                        <x-admin.input :name="$inputName" :label="$label" :value="$inputValue" />
                    @endif
                @endforeach
            </div>
        @endforeach
        <p class="mt-4 text-xs text-gray-500 dark:text-gray-400">{{ __('Leave a translation empty to show the original text in that language.') }}</p>
    </div>
@endif