@props([
    'title',
    'items',
    'formPrefix',
    'saveMethod',
    'editMethod',
    'deleteMethod',
    'resetMethod',
    'nameField' => 'name',
])

<section class="grid gap-6 xl:grid-cols-[22rem_minmax(0,1fr)]">
    <form wire:submit="{{ $saveMethod }}" class="space-y-4 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
        <flux:heading size="lg">{{ __($title) }}</flux:heading>

        <flux:input wire:model="{{ $formPrefix }}.{{ $nameField }}" :label="__('Name')" required />

        @if ($nameField !== 'slug')
            <flux:input wire:model="{{ $formPrefix }}.slug" :label="__('Slug')" />
        @endif

        <div class="flex gap-2">
            <flux:button type="submit" variant="primary">{{ __('Save') }}</flux:button>
            <flux:button type="button" wire:click="{{ $resetMethod }}">{{ __('Reset') }}</flux:button>
        </div>
    </form>

    <div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
        <div class="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
            <flux:heading size="sm">{{ __($title) }}</flux:heading>
        </div>
        <div class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @forelse ($items as $item)
                <div class="flex items-center justify-between gap-4 px-5 py-3">
                    <div class="min-w-0">
                        <div class="truncate font-medium">{{ data_get($item, $nameField) }}</div>
                        @if (data_get($item, 'slug'))<div class="truncate text-xs text-zinc-500">{{ data_get($item, 'slug') }}</div>@endif
                    </div>
                    <div class="flex gap-2">
                        <flux:button size="sm" type="button" wire:click="{{ $editMethod }}({{ $item->id }})">{{ __('Edit') }}</flux:button>
                        <flux:button size="sm" variant="danger" type="button" wire:click="{{ $deleteMethod }}({{ $item->id }})" wire:confirm="{{ __('Delete this item?') }}">{{ __('Delete') }}</flux:button>
                    </div>
                </div>
            @empty
                <div class="px-5 py-10 text-center text-sm text-zinc-500">{{ __('No items yet.') }}</div>
            @endforelse
        </div>
    </div>
</section>