@php
    $f = $faq ?? null;
    $enabledLocales = site_supported_locales();
    $iconList = is_array($icons ?? null) ? $icons : [];
    $selectedIcon = old('icon', $f?->icon ?: ($iconList[0] ?? 'question-mark-circle'));
@endphp
<div class="grid gap-4 sm:grid-cols-2">
    <div
        class="sm:col-span-2"
        x-data="{ icon: @js($selectedIcon) }"
    >
        <label class="admin-label">{{ __('admin.icon') }}</label>
        <input type="hidden" name="icon" x-model="icon" required />

        <div class="admin-icon-picker mt-2" role="listbox" aria-label="{{ __('admin.icon') }}">
            @foreach ($iconList as $icon)
                @php($label = __('admin.faq_icon_'.$icon))
                <button
                    type="button"
                    class="admin-icon-picker__item"
                    role="option"
                    :aria-selected="(icon === @js($icon)).toString()"
                    :class="{ 'is-selected': icon === @js($icon) }"
                    @click="icon = @js($icon)"
                    title="{{ $label }}"
                >
                    <span class="admin-icon-picker__glyph" aria-hidden="true">
                        <x-site.icon :name="$icon" class="h-6 w-6" />
                    </span>
                    <span class="admin-icon-picker__label">{{ $label }}</span>
                </button>
            @endforeach
        </div>

        <div class="admin-icon-picker__preview mt-3">
            <span class="admin-icon-picker__preview-glyph" aria-hidden="true">
                @foreach ($iconList as $icon)
                    <span x-show="icon === @js($icon)" x-cloak>
                        <x-site.icon :name="$icon" class="h-6 w-6" />
                    </span>
                @endforeach
            </span>
            <div class="min-w-0">
                <p class="admin-icon-picker__preview-title">{{ __('admin.icon_preview') }}</p>
                <p class="admin-icon-picker__preview-name" x-text="{
                    @foreach ($iconList as $icon)
                        '{{ $icon }}': @js(__('admin.faq_icon_'.$icon)),
                    @endforeach
                }[icon] || icon"></p>
            </div>
        </div>
    </div>

    @foreach($enabledLocales as $loc)
        <div><label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.title') }}</label>
            <input name="title_{{ $loc }}" value="{{ old("title_{$loc}", $f?->{"title_{$loc}"}) }}" class="admin-input" required />
        </div>
        <div class="sm:col-span-2"><label class="admin-label">{{ __("admin.locale_{$loc}") }} — {{ __('admin.body') }}</label>
            <textarea name="description_{{ $loc }}" rows="4" class="admin-input">{{ old("description_{$loc}", $f?->{"description_{$loc}"}) }}</textarea>
        </div>
    @endforeach
</div>