@php
    $statusColors = ['draft' => 'slate', 'scheduled' => 'sky', 'active' => 'emerald', 'completed' => 'indigo', 'cancelled' => 'rose'];
    $money = fn (?float $value): ?string => $value === null ? null : $base.' '.number_format($value, 2);
    $cards = [
        ['label' => __('Enquiries'), 'value' => number_format($figures['enquiries']), 'icon' => 'inbox', 'accent' => '#0ea5e9',
            'sub' => __(':first new, :influence known', ['first' => $figures['first'], 'influence' => $figures['influence']]),
            'source' => __('Each arrival through the tracked link, the QR code, or a lead form that named this campaign.')],
        ['label' => __('Qualified'), 'value' => number_format($figures['qualified']), 'icon' => 'check-circle', 'accent' => '#10b981',
            'sub' => trans_choice(':count opportunity opened|:count opportunities opened', $figures['opportunities'], ['count' => $figures['opportunities']]),
            'source' => __('Opportunities on this campaign that reached Qualified for the first time.')],
        ['label' => __('Open pipeline'), 'value' => $money($figures['open_value']) ?? __('Not estimated'), 'icon' => 'funnel', 'accent' => '#8b5cf6',
            'sub' => $figures['open_not_estimated'] > 0
                ? __(':count open, :n not estimated', ['count' => $figures['open_count'], 'n' => $figures['open_not_estimated']])
                : trans_choice(':count open|:count open', $figures['open_count'], ['count' => $figures['open_count']]),
            'source' => __('Open opportunities on this campaign, in the base currency. A blank value was never estimated.')],
        ['label' => __('Confirmed orders'), 'value' => $money($figures['confirmed']) ?? __('Not available'), 'icon' => 'flag', 'accent' => '#16a34a',
            'sub' => trans_choice(':count won|:count won', $figures['won'], ['count' => $figures['won']]),
            'source' => __('Won opportunities. The same confirmed figure as each opportunity\'s outcome.')],
        ['label' => __('Invoiced'), 'value' => $money($figures['invoiced']) ?? __('Not available'), 'icon' => 'banknotes', 'accent' => '#f59e0b',
            'sub' => __('Net of voided invoices'),
            'source' => __('Invoices raised on those won opportunities. Voided invoices are left out.')],
    ];
    $tabMeta = [
        'overview' => ['label' => __('Overview'), 'icon' => 'squares-2x2'],
        'enquiries' => ['label' => __('Enquiries'), 'icon' => 'inbox'],
        'content' => ['label' => __('Content'), 'icon' => 'photo'],
        'audience' => ['label' => __('Audience'), 'icon' => 'user-group'],
    ];
@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.campaigns.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" /> {{ __('Campaigns') }}
            </a>

            <x-page-header class="!mb-0 mt-1" :title="$campaign->name" :subtitle="__('Code :code · run by :owner', ['code' => $campaign->code, 'owner' => $campaign->owner?->name ?? __('nobody')])">
            @if ($canEdit)
                @if (! in_array($campaign->status, ['completed', 'cancelled'], true))
                    <x-secondary-button type="button" wire:click="openEdit">
                        <x-icon name="pencil-square" class="mr-1.5 h-4 w-4" /> {{ __('Edit') }}
                    </x-secondary-button>
                @endif
                @if (in_array('draft', $transitions, true))
                    <x-secondary-button type="button" wire:click="moveTo('draft')" wire:confirm="{{ __('Send back to draft? Its tracked link stops attributing enquiries until it is scheduled again.') }}">
                        {{ __('Back to draft') }}
                    </x-secondary-button>
                @endif
                @if (in_array('cancelled', $transitions, true))
                    <x-secondary-button type="button" wire:click="openClose('cancelled')">
                        <x-icon name="x-mark" class="mr-1.5 h-4 w-4" /> {{ __('Cancel campaign') }}
                    </x-secondary-button>
                @endif
                @if (in_array('scheduled', $transitions, true))
                    <x-button type="button" wire:click="moveTo('scheduled')" wire:loading.attr="disabled" wire:target="moveTo">
                        <x-icon name="calendar" class="mr-1.5 h-4 w-4" /> {{ __('Schedule') }}
                    </x-button>
                @elseif (in_array('active', $transitions, true))
                    <x-button type="button" wire:click="moveTo('active')" wire:loading.attr="disabled" wire:target="moveTo">
                        <x-icon name="play" class="mr-1.5 h-4 w-4" /> {{ __('Start') }}
                    </x-button>
                @elseif (in_array('completed', $transitions, true))
                    <x-button type="button" wire:click="openClose('completed')">
                        <x-icon name="check" class="mr-1.5 h-4 w-4" /> {{ __('Complete and review') }}
                    </x-button>
                @endif
            @endif
            </x-page-header>

            <div class="mt-2 flex flex-wrap items-center gap-2 text-sm">
                <x-badge :color="$statusColors[$campaign->status] ?? 'slate'">{{ __(\App\Models\Crm\Campaign::STATUSES[$campaign->status] ?? $campaign->status) }}</x-badge>
                @if ($campaign->starts_on)
                    <x-badge color="slate">{{ $campaign->starts_on->format('j M Y') }}{{ $campaign->ends_on ? ' – '.$campaign->ends_on->format('j M Y') : '' }}</x-badge>
                @endif
                @if ($sectorLabel)
                    <x-badge color="sky">{{ $sectorLabel }}</x-badge>
                @endif
                <span class="font-mono text-xs text-slate-400">{{ $campaign->code }}</span>
            </div>
        </div>

        @if ($campaign->status === 'draft' && $missing !== [])
            <div class="flex items-start gap-3 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
                <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                <p>{{ __('Before this campaign can be scheduled, the brief needs: :fields.', ['fields' => implode(', ', $missing)]) }}</p>
            </div>
        @endif

        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($cards 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>

        <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 ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $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>

        @if ($tab === 'overview')
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                <div class="space-y-6 lg:col-span-2">
                    <x-card class="overflow-hidden">
                        <div class="border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Brief') }}</h2>
                        </div>
                        <dl class="divide-y divide-slate-100 text-sm">
                            @foreach ([
                                __('Objective') => $campaign->objective ?: __('Not set'),
                                __('Target sector') => $sectorLabel ?? __('Not set'),
                                __('Dates') => $campaign->starts_on
                                    ? $campaign->starts_on->format('j M Y').($campaign->ends_on ? ' to '.$campaign->ends_on->format('j M Y') : __(', open-ended'))
                                    : __('Not set'),
                                __('Offer') => $campaign->offer ?: __('Not set'),
                                __('Call to action') => $campaign->call_to_action ?: __('Not set'),
                                __('Success measure') => $campaign->success_measure ?: __('Not set'),
                            ] as $label => $value)
                                <div class="grid grid-cols-1 gap-1 px-5 py-3 sm:grid-cols-3 sm:gap-4">
                                    <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 sm:pt-0.5">{{ $label }}</dt>
                                    <dd class="whitespace-pre-line text-slate-800 sm:col-span-2">{{ $value }}</dd>
                                </div>
                            @endforeach
                            <div class="grid grid-cols-1 gap-1 px-5 py-3 sm:grid-cols-3 sm:gap-4">
                                <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400 sm:pt-0.5">{{ __('Channels') }}</dt>
                                <dd class="flex flex-wrap gap-1.5 sm:col-span-2">
                                    @forelse ($campaign->channels ?? [] as $channel)
                                        <x-badge color="slate">{{ $channelLabels[$channel] ?? $channel }}</x-badge>
                                    @empty
                                        <span class="text-slate-500">{{ __('None chosen') }}</span>
                                    @endforelse
                                </dd>
                            </div>
                        </dl>
                    </x-card>

                    @if ($campaign->review_worked || $campaign->review_not_worked || $campaign->review_repeat)
                        <x-card class="p-5">
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Review') }}</h2>
                            <dl class="mt-4 space-y-4 text-sm">
                                @foreach (\App\Services\Crm\CampaignService::REVIEW_FIELDS as $field => $label)
                                    <div>
                                        <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __($label) }}</dt>
                                        <dd class="mt-1 whitespace-pre-line text-slate-800">{{ $campaign->{$field} ?: __('Not recorded') }}</dd>
                                    </div>
                                @endforeach
                            </dl>
                        </x-card>
                    @endif
                </div>

                <div class="space-y-6">
                    <x-card class="p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Tracked link and QR code') }}</h2>
                        @if ($trackedUrl)
                            <p class="mt-1 text-xs text-slate-500">{{ __('Anyone who requests a quote through this link or code is credited to the campaign automatically.') }}</p>
                            <div class="mt-4 flex justify-center rounded-xl border border-slate-100 bg-white p-3">
                                <img src="{{ $qrSvg }}" alt="{{ __('QR code for :name', ['name' => $campaign->name]) }}" class="h-44 w-44" />
                            </div>
                            <div x-data="{ copied: false }" class="mt-4">
                                <div class="flex items-center gap-2">
                                    <input type="text" readonly value="{{ $trackedUrl }}" class="block w-full rounded-xl border-slate-200 bg-slate-50 text-xs text-slate-700" />
                                    <button type="button" class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800"
                                        x-on:click="navigator.clipboard.writeText(@js($trackedUrl)); copied = true; setTimeout(() => copied = false, 2000)">
                                        <span x-show="! copied">{{ __('Copy') }}</span>
                                        <span x-show="copied" x-cloak>{{ __('Copied') }}</span>
                                    </button>
                                </div>
                                <a href="{{ $qrPng }}" download="campaign-{{ $campaign->code }}-qr.png" class="mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-indigo-600 hover:text-indigo-800">
                                    <x-icon name="arrow-down-tray" class="h-3.5 w-3.5" /> {{ __('Download QR code for print') }}
                                </a>
                            </div>
                        @elseif ($campaign->status === 'draft')
                            <p class="mt-2 text-sm text-slate-500">{{ __('The link and QR code are issued when the campaign is scheduled, so nothing goes out before the brief is agreed.') }}</p>
                        @else
                            <p class="mt-2 text-sm text-slate-500">{{ __('The public request form is switched off for this workspace. Turn it on in the requests queue settings to get a tracked link.') }}</p>
                        @endif
                    </x-card>

                    @if ($channelLinks !== [])
                        <x-card class="p-5">
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Links for each channel') }}</h2>
                            <p class="mt-1 text-xs text-slate-500">{{ __('Use the link for the channel you are posting in. Google and Meta add their click ID when someone clicks the ad.') }}</p>
                            <ul class="mt-4 space-y-3">
                                @foreach ($channelLinks as $link)
                                    <li wire:key="channel-link-{{ $link['key'] }}" x-data="{ copied: false }">
                                        <div class="flex items-center gap-2">
                                            <p class="text-sm font-medium text-slate-900">{{ __($link['label']) }}</p>
                                            @if ($link['on_campaign'])
                                                <x-badge color="indigo">{{ __('On this campaign') }}</x-badge>
                                            @endif
                                        </div>
                                        <div class="mt-1 flex items-center gap-2">
                                            <input type="text" readonly value="{{ $link['url'] }}" class="block w-full rounded-xl border-slate-200 bg-slate-50 text-xs text-slate-700" />
                                            <button type="button" class="shrink-0 text-sm font-medium text-indigo-600 hover:text-indigo-800"
                                                x-on:click="navigator.clipboard.writeText(@js($link['url'])); copied = true; setTimeout(() => copied = false, 2000)">
                                                <span x-show="! copied">{{ __('Copy') }}</span>
                                                <span x-show="copied" x-cloak>{{ __('Copied') }}</span>
                                            </button>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </x-card>
                    @endif

                    <x-card class="p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Spend') }}</h2>
                        <dl class="mt-4 grid grid-cols-2 gap-4 text-sm">
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Planned') }}</dt>
                                <dd class="mt-1 font-semibold tabular-nums text-slate-900">{{ $money($figures['planned']) ?? __('Not set') }}</dd>
                            </div>
                            <div>
                                <dt class="text-xs font-semibold uppercase tracking-wider text-slate-400">{{ __('Actual') }}</dt>
                                <dd class="mt-1 font-semibold tabular-nums text-slate-900">{{ $money($figures['actual']) ?? __('None recorded') }}</dd>
                            </div>
                        </dl>
                        <p class="mt-3 text-xs text-slate-500">{{ __('Actual spend is read from Marketing expenses linked to this campaign. A campaign never authorises spending; Finance records it on the Expenses page.') }}</p>
                        @if ($expenses->isNotEmpty())
                            <ul class="mt-4 divide-y divide-slate-100 text-sm">
                                @foreach ($expenses as $expense)
                                    <li wire:key="expense-{{ $expense->id }}" class="flex items-start justify-between gap-3 py-2">
                                        <span class="text-slate-600">{{ $expense->vendor ?: ($expense->description ?: __('Expense')) }}
                                            <span class="block text-xs text-slate-400">{{ $expense->incurred_on?->format('j M Y') }}</span>
                                        </span>
                                        <span class="whitespace-nowrap tabular-nums font-semibold text-slate-900">{{ $expense->currency_code }} {{ number_format((float) $expense->amount, 2) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </x-card>

                    <x-card class="overflow-hidden">
                        <div class="border-b border-slate-100 bg-slate-50/60 px-5 py-3">
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Where these numbers come from') }}</h2>
                        </div>
                        <ul class="divide-y divide-slate-100 text-sm">
                            @foreach ($cards as $m)
                                <li class="px-5 py-3">
                                    <p class="font-medium text-slate-900">{{ $m['label'] }}</p>
                                    <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $m['source'] }}</p>
                                </li>
                            @endforeach
                            <li class="px-5 py-3">
                                <p class="font-medium text-slate-900">{{ __('Spend') }}</p>
                                <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ __('Planned spend is the figure in the brief. Actual spend is Marketing expenses on the Expenses page that name this campaign, in the base currency.') }}</p>
                            </li>
                        </ul>
                        <p class="border-t border-slate-100 px-5 py-3 text-xs text-slate-500">{{ __('The five results are read live and kept apart. They measure different things and are never added together.') }}</p>
                    </x-card>
                </div>
            </div>
        @endif

        @if ($tab === 'enquiries')
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Enquiries') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('An organisation new to us takes this campaign as its original source. One already on record keeps its source; the campaign is recorded as influence.') }}</p>
                </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">{{ __('When') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Organisation') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Credit') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Opportunity') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Request') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($touches as $touch)
                                <tr wire:key="touch-{{ $touch->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $touch->occurred_at?->timezone(config('app.display_timezone'))->format('j M Y, H:i') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        @if ($touch->customer && $canOpenOrganisations)
                                            <a href="{{ route('crm.organisations.show', $touch->customer_id) }}" wire:navigate class="font-medium text-slate-900 hover:text-indigo-600">{{ $touch->customer->name }}</a>
                                        @else
                                            <span class="text-slate-700">{{ $touch->customer?->name ?? __('Counter order, no organisation') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$touch->kind === 'first' ? 'emerald' : 'sky'">{{ __(\App\Models\Crm\CampaignTouch::KINDS[$touch->kind] ?? $touch->kind) }}</x-badge>
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm">
                                        @if ($touch->opportunity)
                                            @if ($canOpenOpportunities)
                                                <a href="{{ route('crm.opportunities.show', $touch->opportunity_id) }}" wire:navigate class="text-slate-900 hover:text-indigo-600">{{ $touch->opportunity->title }}</a>
                                            @else
                                                {{ $touch->opportunity->title }}
                                            @endif
                                            <p class="text-xs text-slate-400">{{ __(\App\Models\Opportunity::STAGES[$touch->opportunity->stage] ?? $touch->opportunity->stage) }} · {{ $touch->opportunity->owner?->name ?? __('No owner') }}</p>
                                        @else
                                            <span class="text-slate-400">-</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $touch->serviceRequest?->reference ?? '-' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="inbox" :title="__('No enquiries yet')" :message="__('Enquiries appear here as soon as someone uses the tracked link or QR code.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($touches->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $touches->links() }}</div>
                @endif
            </x-card>
        @endif

        @if ($tab === 'content')
            @php $contentColors = ['idea' => 'slate', 'draft' => 'amber', 'review' => 'sky', 'approved' => 'indigo', 'published' => 'emerald', 'cancelled' => 'rose']; @endphp
            <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">{{ __('Content for this campaign') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Planned and published on the content calendar') }}</p>
                    </div>
                    <a href="{{ route('crm.content.index', ['campaign' => $campaign->id, 'view' => 'list']) }}" wire:navigate class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ __('Open in the content calendar') }}</a>
                </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">{{ __('Publish') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Title') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Channel') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Author') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($content as $item)
                                <tr wire:key="content-{{ $item->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $item->publish_at?->timezone(config('app.display_timezone'))->format('j M Y') ?? __('Not scheduled') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $item->title }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $channelLabels[$item->channel] ?? ($item->channel ?: '-') }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $item->author?->name ?? '-' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm"><x-badge :color="$contentColors[$item->status] ?? 'slate'">{{ __(\App\Models\Crm\ContentItem::STATUSES[$item->status] ?? $item->status) }}</x-badge></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="photo" :title="__('No content planned')" :message="__('Plan posts for this campaign on the content calendar.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($content->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $content->links() }}</div>
                @endif
            </x-card>
        @endif

        @if ($tab === 'audience')
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Who this campaign may contact directly') }}</h2>
                    <p class="text-xs text-slate-400">
                        {{ __('Contacts at organisations in :sector. Anyone who withdrew marketing consent, and every organisation marked Do Not Contact, is left out.', ['sector' => $sectorLabel ?? __('the target sector')]) }}
                        @if ($optedOut > 0)
                            {{ trans_choice(':count person in this sector has opted out and is excluded.|:count people in this sector have opted out and are excluded.', $optedOut, ['count' => $optedOut]) }}
                        @endif
                    </p>
                </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">{{ __('Contact') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Organisation') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Preferred channel') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Consent') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($audience as $contact)
                                <tr wire:key="audience-{{ $contact->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">{{ $contact->name }}
                                        @if ($contact->title)<span class="block text-xs font-normal text-slate-400">{{ $contact->title }}</span>@endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-600">{{ $contact->customer?->name ?? '-' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm text-slate-600">{{ __(\App\Models\Crm\Contact::CHANNELS[$contact->preferred_channel] ?? '-') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$contact->marketing_consent === 'granted' ? 'emerald' : 'slate'">{{ __(\App\Models\Crm\Contact::CONSENTS[$contact->marketing_consent] ?? $contact->marketing_consent) }}</x-badge>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-6 py-12">
                                        <x-empty-state icon="user-group" :title="__('Nobody to contact yet')" :message="$campaign->target_sector ? __('No contact in this sector may be marketed to. Add contacts on the organisations first.') : __('Choose a target sector in the brief to see the audience.')" class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                @if ($audience->hasPages())
                    <div class="border-t border-slate-100 px-4 py-3 sm:px-6">{{ $audience->links() }}</div>
                @endif
            </x-card>
        @endif

        {{-- This campaign's emails and their results (S21). Mounted once it is built. --}}
        @unless (\App\Livewire\Crm\Campaigns\EmailSends::isComingSoon())
            <livewire:crm.campaigns.email-sends :campaign-id="$campaign->id" :key="'campaign-email-sends-'.$campaign->id" />
        @endunless
    </div>

    @if ($canEdit)
        <x-dialog-modal wire:model.live="showForm" maxWidth="2xl">
            <x-slot name="title">{{ __('Edit campaign') }}</x-slot>
            <x-slot name="content">
                @include('livewire.crm.campaigns.partials.form')
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showForm', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ __('Save') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

        <x-dialog-modal wire:model.live="showClose" maxWidth="xl">
            <x-slot name="title">{{ $closeAs === 'completed' ? __('Complete the campaign') : __('Cancel the campaign') }}</x-slot>
            <x-slot name="content">
                <p class="text-sm text-slate-600">
                    {{ $closeAs === 'completed'
                        ? __('A short review, so the next campaign starts from what this one taught us. All three are needed.')
                        : __('Optional: note what was learned before it stopped.') }}
                </p>
                <div class="mt-4 space-y-4">
                    <div>
                        <x-label for="rv-worked" value="{{ __('What worked') }}" />
                        <textarea id="rv-worked" rows="2" wire:model="reviewWorked" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="reviewWorked" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="rv-not" value="{{ __('What did not work') }}" />
                        <textarea id="rv-not" rows="2" wire:model="reviewNotWorked" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="reviewNotWorked" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="rv-repeat" value="{{ __('What to repeat next time') }}" />
                        <textarea id="rv-repeat" rows="2" wire:model="reviewRepeat" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="reviewRepeat" class="mt-2" />
                    </div>
                    <x-input-error for="closeAs" class="mt-2" />
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showClose', false)" wire:loading.attr="disabled">{{ __('Back') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="close" wire:loading.attr="disabled" wire:target="close">
                    <span wire:loading.remove wire:target="close">{{ $closeAs === 'completed' ? __('Complete campaign') : __('Cancel campaign') }}</span>
                    <span wire:loading wire:target="close">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif
</div>