{{--
    One editable list: the tab strip across the lists this page edits, then the
    options with rename, reorder and switch off. Used by Stages and Reasons and
    by Sectors and Sources. Needs: $lists, $list, $options, $usage, $editingId,
    and optionally $hint.
--}}
<x-card class="overflow-hidden">
    <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:p-5">
        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($lists as $key => $label)
                <button type="button" wire:click="switchList('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $list === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    {{ $label }}
                </button>
            @endforeach
        </div>
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ $lists[$list] }}</h2>
            <p class="text-xs text-slate-400">
                {{ $hint ?? __('Offered when an opportunity is closed this way.') }}
                {{ __('Records keep the option they were given, so an option is switched off rather than deleted, and renaming it renames it everywhere.') }}
            </p>
        </div>
        <x-input-error for="list" />
    </div>

    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-slate-100">
            <thead>
                <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                    <th class="px-3 lg:px-4 py-3.5">{{ __('Order') }}</th>
                    <th class="px-3 lg:px-4 py-3.5">{{ __('Option') }}</th>
                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Used on') }}</th>
                    <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100 bg-white">
                @forelse ($options as $option)
                    <tr wire:key="option-{{ $option->id }}" class="transition hover:bg-slate-50/70 {{ $option->is_active ? '' : 'bg-slate-50/40' }}">
                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm text-slate-400">
                            <div class="flex items-center gap-1">
                                <button type="button" wire:click="moveOption({{ $option->id }}, -1)" @disabled($loop->first) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move up') }}">
                                    <x-icon name="arrow-up" class="h-3.5 w-3.5" />
                                </button>
                                <button type="button" wire:click="moveOption({{ $option->id }}, 1)" @disabled($loop->last) class="rounded p-1 transition hover:bg-slate-100 hover:text-slate-700 disabled:opacity-30" title="{{ __('Move down') }}">
                                    <x-icon name="arrow-down" class="h-3.5 w-3.5" />
                                </button>
                            </div>
                        </td>
                        <td class="px-3 lg:px-4 py-3 text-sm">
                            @if ($editingId === $option->id)
                                <form wire:submit="saveRename" class="flex flex-wrap items-center gap-2">
                                    <x-input type="text" wire:model="editingLabel" class="block w-full max-w-sm" autofocus />
                                    <x-button type="submit">{{ __('Save') }}</x-button>
                                    <x-secondary-button type="button" wire:click="cancelRename">{{ __('Cancel') }}</x-secondary-button>
                                </form>
                                <x-input-error for="editingLabel" class="mt-2" />
                            @else
                                <span class="font-medium {{ $option->is_active ? 'text-slate-900' : 'text-slate-400 line-through' }}">{{ $option->label }}</span>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm tabular-nums text-slate-500">{{ number_format($usage[$option->value] ?? 0) }}</td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-sm">
                            @if ($option->is_active)
                                <x-badge color="emerald">{{ __('Offered') }}</x-badge>
                            @else
                                <x-badge color="slate">{{ __('Switched off') }}</x-badge>
                            @endif
                        </td>
                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-sm font-medium">
                            <div class="flex items-center justify-end gap-3">
                                @if ($editingId !== $option->id)
                                    <button type="button" wire:click="startRename({{ $option->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Rename') }}</button>
                                @endif
                                @if ($option->is_active)
                                    <button type="button" wire:click="toggleOption({{ $option->id }})"
                                        wire:confirm="{{ ($usage[$option->value] ?? 0) > 0 ? __('Switch this off? The records that carry it keep it, but nobody can choose it again until it is switched back on.') : __('Switch this off?') }}"
                                        class="text-rose-600 transition hover:text-rose-800">{{ __('Switch off') }}</button>
                                @else
                                    <button type="button" wire:click="toggleOption({{ $option->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Switch on') }}</button>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-6 py-12">
                            <x-empty-state icon="tag" :title="__('Nothing on this list')" :message="__('Add the first option below.')" class="border-0 bg-transparent py-0" />
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <form wire:submit="addOption" class="flex flex-col gap-2 border-t border-slate-100 p-4 sm:flex-row sm:items-start sm:p-5">
        <div class="flex-1">
            <x-label for="newLabel" value="{{ __('Add an option') }}" class="sr-only" />
            <x-input id="newLabel" type="text" wire:model="newLabel" class="block w-full" placeholder="{{ __('Add to :list…', ['list' => \Illuminate\Support\Str::lower($lists[$list])]) }}" />
            <x-input-error for="newLabel" class="mt-2" />
        </div>
        <x-button type="submit" wire:loading.attr="disabled" wire:target="addOption">
            <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
            <span wire:loading.remove wire:target="addOption">{{ __('Add') }}</span>
            <span wire:loading wire:target="addOption">{{ __('Adding…') }}</span>
        </x-button>
    </form>
</x-card>