@php
    $tz = config('app.display_timezone');
    $money = fn (?float $value): ?string => $value === null ? null : trim($baseCode.' '.number_format($value, 2));
    $statusColors = ['not_started' => 'slate', 'in_progress' => 'sky', 'opportunity_open' => 'indigo', 'not_a_fit' => 'amber', 'do_not_contact' => 'rose'];
    $stageColors = ['won' => 'emerald', 'lost' => 'rose', 'deferred' => 'amber'];

    $metrics = [
        ['label' => __('Organisations'), 'value' => number_format($funnel['total']), 'icon' => 'building-office', 'accent' => '#6366f1',
            'sub' => trans_choice(':count waiting|:count waiting', $funnel['not_started'], ['count' => number_format($funnel['not_started'])])],
        ['label' => __('Open pipeline'), 'value' => $money($figures['pipeline']) ?? __('Not estimated'), 'icon' => 'funnel', 'accent' => '#8b5cf6',
            'sub' => $figures['unestimated'] > 0
                ? trans_choice(':open open, :count not estimated|:open open, :count not estimated', $figures['unestimated'], ['open' => $figures['open'], 'count' => $figures['unestimated']])
                : trans_choice(':count open opportunity|:count open opportunities', $figures['open'], ['count' => $figures['open']])],
        ['label' => __('Confirmed business'), 'value' => $money($figures['confirmed']) ?? __('Not available'), 'icon' => 'trophy', 'accent' => '#10b981',
            'sub' => trans_choice(':count won|:count won', $figures['won'], ['count' => $figures['won']])],
        ['label' => __('Mode'), 'value' => __(\App\Models\Crm\Portfolio::MODES[$portfolio->mode] ?? $portfolio->mode), 'icon' => 'user-group', 'accent' => '#0ea5e9',
            'sub' => $portfolio->isJoint() ? __('Sponsor collaborates on each') : __('Sponsor watches progress')],
        ['label' => __('Last activity'), 'value' => $figures['last_activity'] ? $figures['last_activity']->timezone($tz)->format('j M Y') : __('None yet'), 'icon' => 'clock', 'accent' => '#64748b',
            'sub' => $figures['last_activity'] ? $figures['last_activity']->diffForHumans() : __('Nothing worked yet')],
    ];

    $funnelMeta = [
        'not_started' => ['queue' => 'waiting', 'color' => 'bg-slate-400'],
        'contacted' => ['queue' => 'in_progress', 'color' => 'bg-sky-500'],
        'in_pipeline' => ['queue' => 'pipeline', 'color' => 'bg-indigo-500'],
        'won' => ['queue' => 'pipeline', 'color' => 'bg-emerald-500'],
        'lost' => ['queue' => 'pipeline', 'color' => 'bg-rose-500'],
        'not_a_fit' => ['queue' => 'set_aside', 'color' => 'bg-amber-400'],
    ];
    $funnelTotal = max(1, $funnel['total']);
    $pageIds = $members->pluck('id')->all();
    $allOnPageSelected = $pageIds !== [] && array_diff($pageIds, array_map('intval', $selected)) === [];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
        <div>
            <a href="{{ route('crm.portfolios.index') }}" wire:navigate class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 hover:text-slate-700">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" /> {{ __('Portfolios') }}
            </a>
        </div>

        <x-page-header :title="$portfolio->name"
            :subtitle="__('Brought by :sponsor. :status. :target', [
                'sponsor' => $portfolio->sponsor?->name ?? __('nobody recorded'),
                'status' => __(\App\Models\Crm\Portfolio::STATUSES[$portfolio->status] ?? $portfolio->status),
                'target' => $portfolio->target_close_on ? __('Target close :date.', ['date' => $portfolio->target_close_on->format('j M Y')]) : '',
            ])">
            @if ($canEdit)
                <x-secondary-button type="button" wire:click="openEdit">
                    <x-icon name="pencil" class="mr-1.5 h-4 w-4" /> {{ __('Edit list') }}
                </x-secondary-button>
                <x-secondary-button type="button" wire:click="openAdd">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" /> {{ __('Add organisations') }}
                </x-secondary-button>
            @endif
            @if ($canPull)
                <x-button type="button" wire:click="openPull">
                    <x-icon name="arrow-right" class="mr-1.5 h-4 w-4" /> {{ __('Pull into pipeline') }}
                </x-button>
            @endif
        </x-page-header>

        @if ($portfolio->description)
            <p class="-mt-4 text-sm text-slate-600">{{ $portfolio->description }}</p>
        @endif

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                </x-card>
            @endforeach
        </section>

        {{-- Progress funnel --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-1 sm:flex-row sm:items-baseline sm:justify-between">
                <h2 class="text-base font-semibold text-slate-900">{{ __('Progress') }}</h2>
                <p class="text-xs text-slate-400">
                    {{ ctype_digit($assignee) ? __('For the person chosen below') : __('The whole list') }}
                    @if ($funnel['nurture'] > 0)
                        · {{ trans_choice(':count deferred to nurture|:count deferred to nurture', $funnel['nurture'], ['count' => $funnel['nurture']]) }}
                    @endif
                </p>
            </div>
            <div class="mt-3 flex h-2.5 overflow-hidden rounded-full bg-slate-100">
                @foreach ($funnelMeta as $key => $meta)
                    @if ($funnel[$key] > 0)
                        <div class="{{ $meta['color'] }}" style="width: {{ $funnel[$key] / $funnelTotal * 100 }}%" title="{{ __(\App\Services\Crm\Portfolios\WorkQueue::FUNNEL[$key]) }}: {{ $funnel[$key] }}"></div>
                    @endif
                @endforeach
            </div>
            <div class="mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ($funnelMeta as $key => $meta)
                    <button type="button" wire:click="switchQueue('{{ $meta['queue'] }}')" class="flex items-center gap-2 rounded-xl border border-slate-200 px-3 py-2 text-left transition hover:border-indigo-300 hover:bg-indigo-50/40">
                        <span class="h-2.5 w-2.5 shrink-0 rounded-full {{ $meta['color'] }}"></span>
                        <span class="min-w-0">
                            <span class="block truncate text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __(\App\Services\Crm\Portfolios\WorkQueue::FUNNEL[$key]) }}</span>
                            <span class="block text-base font-bold tabular-nums text-slate-900">{{ number_format($funnel[$key]) }}</span>
                        </span>
                    </button>
                @endforeach
            </div>
        </x-card>

        {{-- Each person's share --}}
        @if ($progress->isNotEmpty())
            <section class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($progress as $row)
                    @php $met = $row['target'] !== null && $row['pulled_this_week'] >= $row['target']; @endphp
                    <x-card class="flex items-center gap-3 p-4" wire:key="progress-{{ $row['user']->id }}">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $met ? 'bg-emerald-50 text-emerald-600' : 'bg-indigo-50 text-indigo-600' }}">
                            <x-icon name="users" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="truncate text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $row['user']->name }}</p>
                            <p class="text-base font-bold tabular-nums text-slate-900">
                                {{ $row['target'] !== null
                                    ? __(':pulled of :target pulled this week', ['pulled' => $row['pulled_this_week'], 'target' => $row['target']])
                                    : __(':pulled pulled this week', ['pulled' => $row['pulled_this_week']]) }}
                            </p>
                        </div>
                        <span class="rounded-full bg-slate-100 px-2 py-1 text-[10px] font-semibold text-slate-500">{{ __(':count waiting', ['count' => number_format($row['waiting'])]) }}</span>
                    </x-card>
                @endforeach
            </section>
        @endif

        {{-- Work queue --}}
        <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 (\App\Livewire\Crm\Portfolios\Show::QUEUES as $key => $meta)
                <button type="button" wire:click="switchQueue('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $queue === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ __($meta['label']) }}
                </button>
            @endforeach
        </div>

        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                <div>
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Work queue') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Tier 1 first. Pull a batch at a time: each one opens an opportunity with a dated next action.') }}</p>
                </div>
                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <div class="relative max-w-xs flex-1">
                        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                            <x-icon name="magnifying-glass" class="h-5 w-5" />
                        </span>
                        <input type="text" wire:model.live.debounce.300ms="search" placeholder="{{ __('Search organisations…') }}"
                            class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                    </div>
                    <select wire:model.live="assignee" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Everyone') }}</option>
                        @foreach ($assignees as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                        <option value="none">{{ __('Unassigned') }}</option>
                    </select>
                    <select wire:model.live="tier" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Any tier') }}</option>
                        @foreach (\App\Models\Customer::PRIORITY_TIERS as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                        <option value="none">{{ __('No tier') }}</option>
                    </select>
                    <select wire:model.live="sort" aria-label="{{ __('Sort') }}" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Tier 1 first') }}</option>
                        <option value="score">{{ __('Lead score, highest first') }}</option>
                    </select>
                </div>
            </div>

            @if ($selected !== [] && $canPull)
                <div class="flex flex-wrap items-center gap-3 border-b border-indigo-100 bg-indigo-50/60 px-4 py-3 text-sm sm:px-5">
                    <span class="font-semibold text-indigo-700">{{ trans_choice(':count selected|:count selected', count($selected), ['count' => count($selected)]) }}</span>
                    <button type="button" wire:click="openPull" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Pull into pipeline') }}</button>
                    <button type="button" wire:click="markContacted" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Log touch, no reply') }}</button>
                    <button type="button" wire:click="openStatus" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Set status') }}</button>
                    @if ($canReassign)
                        <button type="button" wire:click="openReassign" class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('Reassign') }}</button>
                    @endif
                    <button type="button" wire:click="$set('selected', [])" class="ml-auto text-slate-500 hover:text-slate-700">{{ __('Clear') }}</button>
                </div>
            @endif

            <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">
                            @if ($canPull)
                                <th class="w-10 px-3 lg:px-4 py-3.5">
                                    <input type="checkbox" @checked($allOnPageSelected) wire:click="selectPage(@js($pageIds))" aria-label="{{ __('Select this page') }}" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                </th>
                            @endif
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Organisation') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Tier') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Worked by') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Next') }}</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 ($members as $member)
                            @php
                                $opportunity = $member->opportunity;
                                $inQueue = in_array($member->work_status, \App\Models\Crm\PortfolioMember::QUEUE_STATUSES, true);
                                $step = (int) $member->cadence_step;
                                $cadence = \App\Services\Crm\Portfolios\WorkQueue::CADENCE;
                            @endphp
                            <tr wire:key="member-{{ $member->id }}" class="transition hover:bg-slate-50/70">
                                @if ($canPull)
                                    <td class="px-3 lg:px-4 py-4">
                                        <input type="checkbox" value="{{ $member->id }}" wire:model.live="selected" aria-label="{{ __('Select') }}" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    </td>
                                @endif
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    @if ($orgLinks && $member->customer)
                                        <a href="{{ route('crm.organisations.show', $member->customer_id) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $member->customer->name }}</a>
                                    @else
                                        <span class="font-medium text-slate-900">{{ $member->customer?->name ?? __('Not available') }}</span>
                                    @endif
                                    @if ($member->customer?->sector)
                                        <p class="mt-0.5 text-xs text-slate-400">{{ $sectors[$member->customer->sector] ?? $member->customer->sector }}</p>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $member->tier ? __('Tier :n', ['n' => $member->tier]) : '-' }}</td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $member->assignee?->name ?? __('Unassigned') }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                    @if ($opportunity)
                                        @if ($oppLinks)
                                            <a href="{{ route('crm.opportunities.show', $opportunity->id) }}" wire:navigate>
                                                <x-badge :color="$stageColors[$opportunity->stage] ?? 'indigo'">{{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}</x-badge>
                                            </a>
                                        @else
                                            <x-badge :color="$stageColors[$opportunity->stage] ?? 'indigo'">{{ __(\App\Models\Opportunity::STAGES[$opportunity->stage] ?? $opportunity->stage) }}</x-badge>
                                        @endif
                                    @else
                                        <x-badge :color="$statusColors[$member->work_status] ?? 'slate'">{{ __(\App\Models\Crm\PortfolioMember::WORK_STATUSES[$member->work_status] ?? $member->work_status) }}</x-badge>
                                    @endif
                                    @if ($member->status_reason)
                                        <p class="mt-1 whitespace-normal text-xs text-slate-400">{{ $member->status_reason }}</p>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">
                                    @if ($opportunity && $opportunity->next_action)
                                        {{ $opportunity->next_action }}
                                        @if ($opportunity->next_action_due)
                                            <span class="whitespace-nowrap text-xs text-slate-400">· {{ $opportunity->next_action_due->format('j M') }}</span>
                                        @endif
                                    @elseif ($inQueue)
                                        @if ($step < count($cadence))
                                            {{ __('Touch :n of :total: :touch', ['n' => $step + 1, 'total' => count($cadence), 'touch' => __($cadence[$step])]) }}
                                        @else
                                            <span class="text-amber-700">{{ __('Sequence finished with no reply') }}</span>
                                        @endif
                                        @if ($member->last_touch_at)
                                            <span class="whitespace-nowrap text-xs text-slate-400">· {{ __('last :when', ['when' => $member->last_touch_at->diffForHumans()]) }}</span>
                                        @endif
                                    @else
                                        <span class="text-slate-400">-</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    @if ($canPull && $inQueue)
                                        <div class="flex items-center justify-end gap-3">
                                            <button type="button" wire:click="openPull({{ $member->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Pull') }}</button>
                                            @if ($step < count($cadence))
                                                <button type="button" x-on:click="$dispatch('crm-cadence-touch', { memberId: {{ $member->id }} })" class="text-slate-600 transition hover:text-slate-800">{{ __('Log touch') }}</button>
                                            @endif
                                            <button type="button" wire:click="openStatus({{ $member->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Set aside') }}</button>
                                        </div>
                                    @elseif ($canPull && in_array($member->work_status, ['not_a_fit', 'do_not_contact'], true))
                                        <button type="button" wire:click="openStatus({{ $member->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Change') }}</button>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12">
                                    @if ($funnel['total'] === 0)
                                        <x-empty-state icon="inbox" :title="__('This list is empty')"
                                            :message="$canImport ? __('Add organisations already on record, or import a list from a spreadsheet.') : __('Add organisations already on record to start the queue.')" class="border-0 bg-transparent py-0" />
                                    @elseif (trim($search) !== '' || $assignee !== '' || $tier !== '')
                                        <x-empty-state icon="magnifying-glass" :title="__('Nothing matches')" :message="__('Try another search, or clear the filters.')" class="border-0 bg-transparent py-0" />
                                    @else
                                        <x-empty-state icon="check-circle" :title="__('Nothing here')" :message="__('No organisation on this list is at this step.')" class="border-0 bg-transparent py-0" />
                                    @endif
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($members->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $members->links() }}
                </div>
            @endif
        </x-card>

        @if ($portfolio->importBatch && $canImport)
            <p class="text-xs text-slate-400">
                {{ __('Loaded from :file.', ['file' => $portfolio->importBatch->file_name]) }}
                <a href="{{ route('crm.imports.show', $portfolio->importBatch) }}" wire:navigate class="font-medium text-indigo-600 hover:text-indigo-800">{{ __('See the import') }}</a>
            </p>
        @endif
    </div>

    {{-- Pull --}}
    <x-dialog-modal wire:model.live="showPull" maxWidth="lg">
        <x-slot name="title">{{ __('Pull into the pipeline') }}</x-slot>
        <x-slot name="content">
            <p class="mb-4">{{ __('Each organisation becomes an opportunity at Prospect. :sponsor is the originator and whoever works it is the owner.', ['sponsor' => $portfolio->sponsor?->name ?? __('The sponsor')]) }}
                @if ($portfolio->isJoint())
                    {{ __('On this Joint list the sponsor is added to each as a collaborator.') }}
                @endif
            </p>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label value="{{ __('Which organisations') }}" />
                    <div class="mt-1 flex flex-wrap gap-2">
                        @if ($selected !== [])
                            <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                <input type="radio" value="selected" wire:model.live="pullMode" class="border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                {{ trans_choice('The :count selected|The :count selected', count($selected), ['count' => count($selected)]) }}
                            </label>
                        @endif
                        <label class="flex cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                            <input type="radio" value="next" wire:model.live="pullMode" class="border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            {{ __('The next ones waiting, best tier first') }}
                        </label>
                    </div>
                    <x-input-error for="pullMode" class="mt-2" />
                </div>
                @if ($pullMode === 'next')
                    <div>
                        <x-label for="pull-count" value="{{ __('How many') }}" />
                        <x-input id="pull-count" type="number" min="1" max="{{ \App\Services\Crm\Portfolios\WorkQueue::MAX_PULL }}" class="mt-1 block w-full" wire:model="pullCount" />
                        <x-input-error for="pullCount" class="mt-2" />
                    </div>
                @endif
                <div class="sm:col-span-2">
                    <x-label for="pull-action" value="{{ __('Next action for each') }}" />
                    <x-input id="pull-action" type="text" class="mt-1 block w-full" wire:model="nextAction" />
                    <x-input-error for="nextAction" class="mt-2" />
                </div>
                <div>
                    <x-label for="pull-due" value="{{ __('Due') }}" />
                    <x-input id="pull-due" type="date" class="mt-1 block w-full" wire:model="nextActionDue" />
                    <x-input-error for="nextActionDue" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showPull', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="pullIntoPipeline" wire:loading.attr="disabled" wire:target="pullIntoPipeline">
                <span wire:loading.remove wire:target="pullIntoPipeline">{{ __('Open opportunities') }}</span>
                <span wire:loading wire:target="pullIntoPipeline">{{ __('Opening…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Status --}}
    <x-dialog-modal wire:model.live="showStatus" maxWidth="lg">
        <x-slot name="title">{{ __('Set the work status') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <x-label for="status-to" value="{{ __('Status') }}" />
                    <select id="status-to" wire:model.live="statusTo" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Services\Crm\Portfolios\WorkQueue::SETTABLE as $value)
                            <option value="{{ $value }}">{{ __(\App\Models\Crm\PortfolioMember::WORK_STATUSES[$value]) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="status" class="mt-2" />
                </div>
                <div>
                    <x-label for="status-reason" value="{{ in_array($statusTo, ['not_a_fit', 'do_not_contact'], true) ? __('Why') : __('Note (optional)') }}" />
                    <x-input id="status-reason" type="text" class="mt-1 block w-full" wire:model="statusReason" placeholder="{{ __('e.g. prints in house, asked not to be called') }}" />
                    <x-input-error for="statusReason" class="mt-2" />
                </div>
                @if ($statusTo === 'do_not_contact')
                    <p class="text-xs text-slate-500">{{ __('A prospect marked Do not contact is marked so everywhere in the CRM. A trading customer keeps its lifecycle.') }}</p>
                @endif
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showStatus', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveStatus" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Reassign --}}
    <x-dialog-modal wire:model.live="showReassign" maxWidth="lg">
        <x-slot name="title">{{ __('Reassign organisations') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4">
                <p>{{ trans_choice('Move :count organisation to someone else. The reason is noted on the list.|Move :count organisations to someone else. The reason is noted on the list.', count($selected), ['count' => count($selected)]) }}</p>
                <div>
                    <x-label for="reassign-to" value="{{ __('New assignee') }}" />
                    <select id="reassign-to" wire:model="reassignTo" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Choose…') }}</option>
                        @foreach ($teamUsers as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="reassignTo" class="mt-2" />
                </div>
                <div>
                    <x-label for="reassign-reason" value="{{ __('Reason') }}" />
                    <x-input id="reassign-reason" type="text" class="mt-1 block w-full" wire:model="reassignReason" />
                    <x-input-error for="reassignReason" class="mt-2" />
                </div>
                <label class="flex items-center gap-2 text-sm text-slate-600">
                    <input type="checkbox" wire:model="moveOpportunities" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                    {{ __('Hand their open opportunities to the new assignee too. The originator does not change.') }}
                </label>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReassign', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="reassign" wire:loading.attr="disabled">{{ __('Reassign') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Edit the list --}}
    <x-dialog-modal wire:model.live="showEdit" maxWidth="2xl">
        <x-slot name="title">{{ __('Edit list') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="edit-name" value="{{ __('Name') }}" />
                    <x-input id="edit-name" type="text" class="mt-1 block w-full" wire:model="form.name" />
                    <x-input-error for="form.name" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit-mode" value="{{ __('Mode') }}" />
                    <select id="edit-mode" wire:model="form.mode" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Models\Crm\Portfolio::MODES as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-400">{{ __('Applies to opportunities pulled from now on.') }}</p>
                </div>
                <div>
                    <x-label for="edit-status" value="{{ __('Status') }}" />
                    <select id="edit-status" wire:model="form.status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach (\App\Models\Crm\Portfolio::STATUSES as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2">
                    <x-label value="{{ __('Worked by, with each person\'s weekly pull target') }}" />
                    <div class="mt-1 space-y-2">
                        @foreach ($teamUsers as $person)
                            <div wire:key="edit-assignee-{{ $person->id }}" class="flex items-center gap-3">
                                <label class="flex flex-1 cursor-pointer items-center gap-2 rounded-xl border border-slate-200 px-3 py-1.5 text-sm text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                    <input type="checkbox" value="{{ $person->id }}" wire:model.live="formAssignees" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                    {{ $person->name }}
                                </label>
                                @if (in_array((string) $person->id, array_map('strval', $formAssignees), true))
                                    <x-input type="number" min="1" class="block w-28" wire:model="formTargets.{{ $person->id }}" placeholder="{{ __('Per week') }}" />
                                @endif
                            </div>
                        @endforeach
                    </div>
                    <x-input-error for="formAssignees" class="mt-2" />
                </div>
                <div>
                    <x-label for="edit-tier" value="{{ __('Default tier') }}" />
                    <select id="edit-tier" wire:model="form.default_tier" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('None') }}</option>
                        @foreach (\App\Models\Customer::PRIORITY_TIERS as $value => $label)
                            <option value="{{ $value }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <x-label for="edit-source" value="{{ __('Source of the list') }}" />
                    <select id="edit-source" wire:model="form.source" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Not recorded') }}</option>
                        @foreach ($sources as $value => $label)
                            <option value="{{ $value }}">{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <x-label for="edit-close" value="{{ __('Target close date') }}" />
                    <x-input id="edit-close" type="date" class="mt-1 block w-full" wire:model="form.target_close_on" />
                    <x-input-error for="form.target_close_on" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="edit-description" value="{{ __('Description') }}" />
                    <textarea id="edit-description" rows="2" wire:model="form.description" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                </div>
                <p class="text-xs text-slate-400 sm:col-span-2">{{ __('The sponsor cannot be changed: they originated every opportunity pulled from this list.') }}</p>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showEdit', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveEdit" wire:loading.attr="disabled">{{ __('Save') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Add organisations --}}
    <x-dialog-modal wire:model.live="showAdd" maxWidth="2xl">
        <x-slot name="title">{{ __('Add organisations to the list') }}</x-slot>
        <x-slot name="content">
            <div class="space-y-4">
                <div class="relative">
                    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400">
                        <x-icon name="magnifying-glass" class="h-5 w-5" />
                    </span>
                    <input type="text" wire:model.live.debounce.300ms="addSearch" placeholder="{{ __('Search organisations on record…') }}"
                        class="block w-full rounded-xl border-slate-200 bg-slate-50 py-2.5 pl-10 pr-3 text-sm text-slate-900 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-500 focus:bg-white focus:ring-indigo-500" />
                </div>
                <div class="max-h-72 divide-y divide-slate-100 overflow-y-auto rounded-xl border border-slate-200">
                    @forelse ($addResults as $customer)
                        <label wire:key="add-{{ $customer->id }}" class="flex cursor-pointer items-center gap-3 px-3 py-2 hover:bg-slate-50">
                            <input type="checkbox" value="{{ $customer->id }}" wire:model="addIds" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            <span class="min-w-0 flex-1">
                                <span class="block text-sm font-medium text-slate-900">{{ $customer->name }}</span>
                                <span class="block text-xs text-slate-400">
                                    {{ __(\App\Models\Customer::LIFECYCLES[$customer->lifecycle] ?? $customer->lifecycle) }}
                                    · {{ $customer->relationshipOwner ? __('Owned by :name', ['name' => $customer->relationshipOwner->name]) : __('No relationship owner') }}
                                </span>
                            </span>
                        </label>
                    @empty
                        <p class="px-3 py-6 text-center text-sm text-slate-400">
                            {{ mb_strlen(trim($addSearch)) < 2 ? __('Type at least two letters of a name.') : __('No organisation on record matches, or they are all on this list already.') }}
                        </p>
                    @endforelse
                </div>
                <x-input-error for="addIds" class="mt-2" />
                <div>
                    <x-label for="add-assignee" value="{{ __('Worked by') }}" />
                    <select id="add-assignee" wire:model="addAssignee" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($assignees as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="addAssignee" class="mt-2" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showAdd', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="addOrganisations" wire:loading.attr="disabled">{{ __('Add to the queue') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- The contact sequence's touch dialog (S7). --}}
    @if ($canPull)
        <livewire:crm.cadence.touch-dialog />
    @endif
</div>