{{--
    Shared table partial for both default and custom-store flow
    sections on /flows.

    Required:
      $flows         Collection of Flow models
      $canManage     boolean
      $allStores     Collection of Store models for the Copy
                     dropdown
      $tableTestKey  string used as the `data-test` marker so the
                     test suite can target each section
--}}
<div
    class="overflow-hidden rounded-md border border-zinc-200 dark:border-zinc-800"
    data-test="{{ $tableTestKey }}"
>
    <table class="w-full text-sm">
        <thead class="border-b border-zinc-200 bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
            <tr>
                <th class="px-3 py-2 font-medium">{{ __('Name') }}</th>
                <th class="px-3 py-2 font-medium">{{ __('Scope') }}</th>
                <th class="px-3 py-2 font-medium">{{ __('Status') }}</th>
                <th class="px-3 py-2 font-medium">{{ __('Updated') }}</th>
                <th class="w-px px-3 py-2"></th>
            </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
            @foreach ($flows as $flow)
                <tr
                    data-test="flows-row"
                    data-flow-id="{{ $flow->id }}"
                    data-flow-slug="{{ $flow->slug }}"
                    data-flow-scope="{{ $flow->store_id === null ? 'default' : 'store' }}"
                >
                    <td class="px-3 py-2 align-top">
                        <div class="flex items-center gap-2">
                            <div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $flow->name }}</div>
                            @if ($flow->needs_review)
                                <flux:badge size="sm" color="amber" data-test="flows-row-needs-review">
                                    {{ __('Needs review') }}
                                </flux:badge>
                            @endif
                            @if ($flow->import_key)
                                <flux:badge size="sm" color="sky" data-test="flows-row-imported">
                                    {{ __('Imported') }}
                                </flux:badge>
                            @endif
                            @if ($flow->isCopy())
                                <flux:badge size="sm" color="zinc" data-test="flows-row-copy">
                                    {{ __('Copy') }}
                                </flux:badge>
                            @endif
                        </div>
                        <div class="text-xs text-zinc-500 dark:text-zinc-400">
                            <span class="font-mono">{{ $flow->slug }}</span>
                        </div>
                        {{-- Source document trail. Imported flows
                             carry the original .docx / .xlsx filename
                             through `source_doc`; surfacing it in the
                             row helps operators trace a flow back to
                             the pack it came from without having to
                             open Edit. --}}
                        @if ($flow->source_doc)
                            <div
                                class="mt-1 text-xs italic text-zinc-500 dark:text-zinc-400"
                                data-test="flows-row-source-doc"
                            >
                                {{ $flow->source_doc }}
                            </div>
                        @endif
                    </td>
                    <td class="px-3 py-2 align-top text-xs">
                        @if ($flow->isDefault())
                            <flux:badge size="sm" color="zinc">{{ __('Default') }}</flux:badge>
                        @else
                            <flux:badge size="sm" color="sky">
                                {{ $flow->store?->name ?? '—' }}
                            </flux:badge>
                        @endif
                        @if ($flow->category)
                            <div class="mt-1 text-zinc-500 dark:text-zinc-400">{{ $flow->category }}</div>
                        @endif
                    </td>
                    <td class="px-3 py-2 align-top">
                        <flux:badge
                            size="sm"
                            :color="$this->statusBadgeColor($flow)"
                            data-test="flows-row-status"
                        >
                            {{ $flow->status->label() }}
                        </flux:badge>
                    </td>
                    <td class="px-3 py-2 align-top text-xs text-zinc-600 dark:text-zinc-300">
                        {{ $flow->updated_at?->diffForHumans() }}
                    </td>
                    <td class="px-3 py-2 align-top text-right">
                        @if ($canManage)
                            <div class="flex items-center justify-end gap-1.5">
                                @if ($confirmingDeleteId === $flow->id)
                                    <flux:button
                                        type="button"
                                        size="sm"
                                        variant="ghost"
                                        wire:click="cancelDelete"
                                        data-test="flows-delete-cancel"
                                    >
                                        {{ __('Cancel') }}
                                    </flux:button>
                                    <flux:button
                                        type="button"
                                        size="sm"
                                        variant="danger"
                                        wire:click="deleteFlow({{ $flow->id }})"
                                        data-test="flows-delete-confirm"
                                    >
                                        {{ __('Delete flow') }}
                                    </flux:button>
                                @else
                                    {{-- Copy dropdown — operators promote a default
                                         into a store override OR copy a store flow
                                         into a sibling store. Uses Flux dropdown so
                                         we get keyboard nav + accessible labelling
                                         for free. --}}
                                    <flux:dropdown>
                                        <flux:button
                                            size="sm"
                                            variant="ghost"
                                            icon-trailing="chevron-down"
                                            data-test="flows-copy-trigger"
                                        >
                                            {{ __('Copy') }}
                                        </flux:button>
                                        <flux:menu>
                                            @if ($flow->store_id !== null)
                                                <flux:menu.item
                                                    wire:click="copyFlow({{ $flow->id }}, null)"
                                                    icon="document-duplicate"
                                                    data-test="flows-copy-to-default"
                                                >
                                                    {{ __('Copy to default flows') }}
                                                </flux:menu.item>
                                                <flux:menu.separator />
                                            @endif
                                            @foreach ($allStores as $store)
                                                @if ($store->id !== $flow->store_id)
                                                    <flux:menu.item
                                                        wire:click="copyFlow({{ $flow->id }}, {{ $store->id }})"
                                                        icon="document-duplicate"
                                                        data-test="flows-copy-to-store"
                                                        data-target-store-id="{{ $store->id }}"
                                                    >
                                                        {{ __('Copy to :store', ['store' => $store->name]) }}
                                                    </flux:menu.item>
                                                @endif
                                            @endforeach
                                        </flux:menu>
                                    </flux:dropdown>

                                    <flux:button
                                        :href="route('flows.edit', $flow->id)"
                                        wire:navigate
                                        size="sm"
                                        variant="ghost"
                                        data-test="flows-edit"
                                    >
                                        {{ __('Edit') }}
                                    </flux:button>
                                    <flux:button
                                        type="button"
                                        size="sm"
                                        variant="ghost"
                                        wire:click="confirmDelete({{ $flow->id }})"
                                        data-test="flows-delete"
                                    >
                                        {{ __('Delete') }}
                                    </flux:button>
                                @endif
                            </div>
                        @else
                            <span class="text-xs text-zinc-400 dark:text-zinc-500">{{ __('Read-only') }}</span>
                        @endif
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>