@php
    $consent = $job->showcase_consent;
    $consentMeta = match (true) {
        $consent === true  => ['tone' => 'bg-emerald-50 text-emerald-700 ring-emerald-600/15', 'icon' => 'check-circle',         'label' => __('Cleared to show')],
        $consent === false => ['tone' => 'bg-brand-red-50 text-brand-red-700 ring-brand-red-600/15', 'icon' => 'no-symbol',      'label' => __('Must not be shown')],
        default            => ['tone' => 'bg-brand-yellow-50 text-brand-yellow-800 ring-brand-yellow-600/20', 'icon' => 'question-mark-circle', 'label' => __('Nobody has asked')],
    };
@endphp

<x-card class="overflow-hidden">
    <div class="flex flex-col gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4 sm:flex-row sm:items-center sm:justify-between">
        <div class="flex items-start gap-3">
            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white text-brand-700 shadow-sm ring-1 ring-slate-200">
                <x-icon name="camera" class="h-5 w-5" />
            </span>
            <div>
                <h2 class="text-base font-semibold text-slate-900">{{ __('Showcase') }}</h2>
                <p class="mt-0.5 text-xs text-slate-500">{{ __('Pictures and video of the finished work, for the portfolio and for content. Kept apart from quality evidence, and gathered across every job under Showcase in the sidebar.') }}</p>
            </div>
        </div>

        <div class="flex shrink-0 items-center gap-2">
            <span class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-xs font-semibold ring-1 ring-inset {{ $consentMeta['tone'] }}">
                <x-icon :name="$consentMeta['icon']" class="h-4 w-4" />
                {{ $consentMeta['label'] }}
            </span>
            @if ($showcase->isNotEmpty())
                <span class="rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold tabular-nums text-slate-600">{{ $showcase->count() }}</span>
            @endif
        </div>
    </div>

    <div class="space-y-5 p-5">
        {{-- The nudge. A job that has shipped cannot be photographed again. --}}
        @if ($nudge && $canManage)
            <div class="flex flex-wrap items-center gap-3 rounded-xl border border-brand-yellow-200 bg-brand-yellow-50 px-4 py-3">
                <x-icon name="camera" class="h-5 w-5 shrink-0 text-brand-yellow-700" />
                <p class="min-w-0 flex-1 text-sm text-brand-yellow-800">
                    <span class="font-semibold">{{ __('This job is finished and nothing was photographed.') }}</span>
                    {{ __('Once it leaves the shop it cannot be shot again. Take a couple of pictures and a short clip now.') }}
                </p>
            </div>
        @endif

        {{-- No capture bar of its own. There is one camera on this tab, in
             Files & Attachments above, and "Showcase" is one of the places it
             can put a shot. Two boxes for the same act only ever meant the
             second one went unnoticed. --}}
        @if ($canManage)
            <div class="flex flex-wrap items-center gap-2 rounded-xl border border-slate-200 bg-slate-50/70 px-4 py-3 text-xs text-slate-500">
                <x-icon name="arrow-up" class="h-4 w-4 shrink-0 text-slate-400" />
                <span class="min-w-0 flex-1">
                    {{ __('Shoot it with the camera in Files & Attachments above — set “Add to” to Showcase first, and it lands here.') }}
                    {{ __('Straight on, in good light, with nothing else in frame.') }}
                </span>
            </div>
        @endif

        @if ($showcase->isNotEmpty())
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
                @foreach ($showcase as $file)
                    <x-media-tile wire:key="showcase-{{ $file->id }}" :file="$file"
                                  :show-caption="$canManage"
                                  :caption-action="'caption('.$file->id.', $event.target.value)'"
                                  :delete-action="$canManage ? 'remove('.$file->id.')' : null"
                                  :delete-confirm="__('Remove this from the showcase? The file is deleted too.')" />
                @endforeach
            </div>
        @elseif (! $canManage)
            <p class="text-sm text-slate-400">{{ __('Nothing has been captured for the portfolio on this job.') }}</p>
        @endif

        {{-- Consent. Asked per job, because a customer who is normally happy to
             be shown may still have one job they would rather nobody saw. --}}
        @if ($canManage)
            <div class="rounded-xl border border-slate-200 bg-slate-50/60 p-4">
                <h3 class="text-sm font-semibold text-slate-800">{{ __('May we show this job publicly?') }}</h3>
                <p class="mt-0.5 text-xs text-slate-500">{{ __('Recorded against this job only. Until someone answers, the gallery shows it to staff but marks it as unconfirmed, so nothing goes out on an assumption.') }}</p>

                <div class="mt-3 flex flex-wrap items-center gap-2">
                    <button type="button" wire:click="setConsent(true)"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-semibold ring-1 ring-inset transition {{ $consent === true ? 'bg-emerald-600 text-white ring-emerald-600' : 'bg-white text-slate-700 ring-slate-200 hover:ring-emerald-300' }}">
                        <x-icon name="check" class="h-3.5 w-3.5" />
                        {{ __('Yes, the client is happy') }}
                    </button>
                    <button type="button" wire:click="setConsent(false)"
                            class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-semibold ring-1 ring-inset transition {{ $consent === false ? 'bg-brand-red-600 text-white ring-brand-red-600' : 'bg-white text-slate-700 ring-slate-200 hover:ring-rose-300' }}">
                        <x-icon name="no-symbol" class="h-3.5 w-3.5" />
                        {{ __('No, keep it private') }}
                    </button>
                    @if ($consent !== null)
                        <button type="button" wire:click="setConsent(null)"
                                class="text-xs font-medium text-slate-400 transition hover:text-slate-600">{{ __('Clear') }}</button>
                    @endif
                </div>

                <div class="mt-3">
                    <x-label for="consentNote" :value="__('Note (optional)')" />
                    <x-input id="consentNote" type="text" wire:model="consentNote" class="mt-1 block w-full"
                             placeholder="{{ __('e.g. fine to show, but blur the phone number') }}" />
                    <x-input-error for="consentNote" class="mt-2" />
                    <p class="mt-1 text-[11px] text-slate-400">{{ __('Saved with your answer above.') }}</p>
                </div>
            </div>
        @elseif ($job->showcase_consent_note)
            <p class="text-xs italic text-slate-500">“{{ $job->showcase_consent_note }}”</p>
        @endif
    </div>
</x-card>