@php
    use App\Models\AssetVerification;

    $statusMeta = [
        AssetVerification::OPEN      => ['label' => __('Being counted'),     'color' => 'sky'],
        AssetVerification::SUBMITTED => ['label' => __('Awaiting approval'), 'color' => 'amber'],
        AssetVerification::APPROVED  => ['label' => __('Approved'),          'color' => 'emerald'],
        AssetVerification::RETURNED  => ['label' => __('Sent back'),         'color' => 'rose'],
    ];

    // `on` is written out in full rather than composed from the colour: Tailwind
    // only ships classes it can see as literal strings in the source.
    $resultMeta = [
        AssetVerification::PRESENT => [
            'label' => __('Present'), 'color' => 'emerald', 'icon' => 'check-circle',
            'on' => 'border-emerald-300 bg-emerald-50 text-emerald-700 ring-2 ring-emerald-100',
        ],
        AssetVerification::DAMAGED => [
            'label' => __('Damaged'), 'color' => 'amber', 'icon' => 'wrench-screwdriver',
            'on' => 'border-amber-300 bg-amber-50 text-amber-700 ring-2 ring-amber-100',
        ],
        AssetVerification::MISSING => [
            'label' => __('Missing'), 'color' => 'rose', 'icon' => 'exclamation-triangle',
            'on' => 'border-rose-300 bg-rose-50 text-rose-700 ring-2 ring-rose-100',
        ],
    ];

    $tonePill = [
        'up'    => 'bg-emerald-50 text-emerald-700',
        'down'  => 'bg-rose-50 text-rose-700',
        'muted' => 'bg-slate-100 text-slate-500',
    ];

    $countable = $sheet?->isCountable() ?? false;
    $daysLeft  = $due->daysRemaining();
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        <x-asset-tabs />

        <x-page-header
            :title="__('Monthly asset count')"
            :subtitle="__('Walk the floor, tick off what is actually there, and send it to a director to sign off. Each month is counted in the first week of the one after it, alongside the month-end close.')"
        >
            <select
                wire:model.live="period"
                class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
                aria-label="{{ __('Month') }}"
            >
                @foreach ($periodOptions as $value => $label)
                    <option value="{{ $value }}">{{ $label }}</option>
                @endforeach
            </select>

            @if ($sheet && $countable && $canCount)
                {{-- :disabled rather than @disabled: a Blade directive inside a
                     component's opening tag confuses the attribute parser. --}}
                <x-button wire:click="openSubmit" type="button" :disabled="! $sheet->isComplete()">
                    <x-icon name="paper-airplane" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Send for approval') }}
                </x-button>
            @endif

            @if ($sheet?->isAwaitingApproval() && $canApprove)
                <x-button wire:click="openReview" type="button" variant="gradient">
                    <x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Review count') }}
                </x-button>
            @endif
        </x-page-header>

        {{-- The one thing the page has to say before anything else: where this
             month's count stands, and whose move it is. --}}
        @if ($sheet)
            <x-card class="p-4 sm:p-5">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h2 class="text-base font-semibold text-slate-900">{{ $sheet->periodLabel() }}</h2>
                            <x-badge :color="$statusMeta[$sheet->status]['color'] ?? 'slate'">
                                {{ $statusMeta[$sheet->status]['label'] ?? $sheet->status }}
                            </x-badge>
                        </div>
                        <p class="mt-1 text-sm text-slate-500">
                            @if ($sheet->isApproved())
                                {{ __('Approved by :who on :when.', ['who' => $sheet->reviewer?->name ?? __('a director'), 'when' => $sheet->reviewed_at?->timezone(config('app.display_timezone'))->format('j M Y')]) }}
                            @elseif ($sheet->isAwaitingApproval())
                                {{ __('Sent up by :who on :when. Nothing is written to the register until a director approves it.', ['who' => $sheet->submitter?->name ?? __('production'), 'when' => $sheet->submitted_at?->timezone(config('app.display_timezone'))->format('j M Y')]) }}
                            @elseif ($daysLeft >= 0)
                                {{ trans_choice('{0} Due today.|{1} :count day left to finish and get it signed off.|[2,*] :count days left to finish and get it signed off.', $daysLeft, ['count' => $daysLeft]) }}
                            @else
                                {{ __('Overdue by :days day(s). :month has not been closed off against what is actually in the building.', ['days' => abs($daysLeft), 'month' => $sheet->periodLabel()]) }}
                            @endif
                        </p>
                    </div>

                    <div class="w-full sm:w-72">
                        <div class="flex items-center justify-between text-xs font-semibold text-slate-500">
                            <span>{{ __('Progress') }}</span>
                            <span class="tabular-nums">{{ $sheet->checkedCount() }} / {{ $sheet->lineCount() }}</span>
                        </div>
                        <div class="mt-1.5 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                            <div
                                class="h-full rounded-full transition-all {{ $sheet->isComplete() ? 'bg-emerald-500' : 'bg-indigo-500' }}"
                                style="width: {{ $sheet->progressPercent() }}%"
                            ></div>
                        </div>
                    </div>
                </div>

                @if ($sheet->status === AssetVerification::RETURNED && $sheet->review_note)
                    <div class="mt-4 rounded-xl border border-rose-200 bg-rose-50/70 p-4">
                        <p class="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-rose-700">
                            <x-icon name="chat-bubble-left-right" class="h-3.5 w-3.5" />
                            {{ __('Sent back by :who', ['who' => $sheet->reviewer?->name ?? __('a director')]) }}
                        </p>
                        <p class="mt-1.5 text-sm text-rose-900">{{ $sheet->review_note }}</p>
                    </div>
                @endif

                @if ($sheet->notes)
                    <div class="mt-4 rounded-xl border border-slate-200 bg-slate-50/70 p-4">
                        <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">{{ __('Note from the count') }}</p>
                        <p class="mt-1.5 text-sm text-slate-700">{{ $sheet->notes }}</p>
                    </div>
                @endif
            </x-card>
        @endif

        {{-- Counters. No money here on purpose: this screen is for the floor. --}}
        <section class="grid grid-cols-2 gap-4 lg:grid-cols-4">
            @foreach ($kpis 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 px-2 py-1 text-[11px] font-semibold {{ $tonePill[$m['tone']] ?? $tonePill['muted'] }}">
                        {{ $m['sub'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        {{-- The sheet --}}
        <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 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 by name, tag, serial, location…') }}"
                        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="flex flex-wrap items-center gap-3">
                    <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach ($filters as $key => $label)
                            <button type="button" wire:click="$set('filter', '{{ $key }}')"
                                class="rounded-lg px-3 py-1.5 transition {{ $filter === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ __($label) }}
                            </button>
                        @endforeach
                    </div>

                    @if ($countable && $canCount)
                        <x-secondary-button wire:click="markPagePresent" type="button"
                            wire:confirm="{{ __('Mark everything still unanswered on this page as present?') }}">
                            <x-icon name="check-circle" class="-ms-1 me-1.5 h-4 w-4" />
                            {{ __('All present on this page') }}
                        </x-secondary-button>
                    @endif
                </div>
            </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">{{ __('Asset') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Register says') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Found') }}</th>
                            <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Answer') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($lines as $line)
                            <tr wire:key="line-{{ $line->id }}" class="transition hover:bg-slate-50/70">
                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    <p class="font-medium text-slate-900">{{ $line->asset?->name ?? __('(removed)') }}</p>
                                    <p class="mt-0.5 text-xs text-slate-400">
                                        {{ collect([$line->asset?->asset_tag, $line->asset?->serial_number, $line->asset?->category])->filter()->join(' · ') ?: '—' }}
                                    </p>
                                </td>

                                <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">
                                    {{ $line->expected_location ?: __('No location recorded') }}
                                    @if ($line->expected_condition)
                                        <span class="text-slate-400">· {{ $line->expected_condition }}</span>
                                    @endif
                                </td>

                                <td class="px-3 lg:px-4 py-4 text-sm">
                                    @if ($line->isChecked())
                                        <div class="space-y-1">
                                            @if ($line->hasMoved())
                                                <p class="flex items-center gap-1 text-xs font-semibold text-amber-700">
                                                    <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                                                    {{ $line->location_found }}
                                                </p>
                                            @elseif ($line->location_found)
                                                <p class="text-xs text-slate-500">{{ $line->location_found }}</p>
                                            @endif
                                            @if ($line->condition_found && $line->condition_found !== $line->expected_condition)
                                                <p class="text-xs text-slate-500">{{ __('Condition: :c', ['c' => $line->condition_found]) }}</p>
                                            @endif
                                            @if ($line->note)
                                                <p class="text-xs text-slate-400">{{ $line->note }}</p>
                                            @endif
                                            <p class="text-[11px] text-slate-400">
                                                {{ __('by :who', ['who' => $line->checker?->name ?? '—']) }}
                                            </p>
                                        </div>
                                    @else
                                        <span class="text-xs text-slate-300">{{ __('Not checked yet') }}</span>
                                    @endif
                                </td>

                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right">
                                    @if ($countable && $canCount)
                                        <div class="flex items-center justify-end gap-1">
                                            @foreach ($resultMeta as $key => $meta)
                                                <button
                                                    type="button"
                                                    wire:click="mark({{ $line->id }}, '{{ $key }}')"
                                                    title="{{ $meta['label'] }}"
                                                    aria-label="{{ $meta['label'] }}"
                                                    @class([
                                                        'inline-flex h-9 w-9 items-center justify-center rounded-xl border transition',
                                                        $meta['on'] => $line->result === $key,
                                                        'border-slate-200 text-slate-400 hover:border-slate-300 hover:text-slate-600' => $line->result !== $key,
                                                    ])
                                                >
                                                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                                                </button>
                                            @endforeach

                                            <button
                                                type="button"
                                                wire:click="openDetail({{ $line->id }})"
                                                title="{{ __('Add detail') }}"
                                                aria-label="{{ __('Add detail') }}"
                                                class="inline-flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 text-slate-400 transition hover:border-slate-300 hover:text-slate-600"
                                            >
                                                <x-icon name="pencil" class="h-4 w-4" />
                                            </button>
                                        </div>
                                    @elseif ($line->isChecked())
                                        <x-badge :color="$resultMeta[$line->result]['color'] ?? 'slate'">
                                            {{ $resultMeta[$line->result]['label'] ?? $line->result }}
                                        </x-badge>
                                    @else
                                        <span class="text-xs text-slate-300">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="px-6 py-12">
                                    <x-empty-state
                                        icon="clipboard-document-check"
                                        :title="$sheet === null ? __('No count for this month') : __('Nothing to show')"
                                        :message="$sheet === null
                                            ? __('A count is done in the first week of the month after the one it closes. Anything further back is gone — you cannot go and look at where something was two months ago.')
                                            : __('Nothing on the register matches this filter.')"
                                        class="border-0 bg-transparent py-0"
                                    />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        {{-- Past counts. The gaps are the point: a month with no row is a month
             nobody checked, and that is a fact the register should not hide. --}}
        @if ($history->isNotEmpty())
            <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">{{ __('Past counts') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Every month the register was checked against the building.') }}</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">{{ __('Month') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Present') }}</th>
                                <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Damaged') }}</th>
                                <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Missing') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Counted by') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Approved by') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($history as $past)
                                <tr wire:key="past-{{ $past->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm font-medium text-slate-900">
                                        <button type="button" wire:click="$set('period', '{{ $past->period }}')" class="text-indigo-600 transition hover:text-indigo-800">
                                            {{ $past->periodLabel() }}
                                        </button>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-sm">
                                        <x-badge :color="$statusMeta[$past->status]['color'] ?? 'slate'">
                                            {{ $statusMeta[$past->status]['label'] ?? $past->status }}
                                        </x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums text-slate-900">{{ $past->present_count }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $past->damaged_count > 0 ? 'font-semibold text-amber-700' : 'text-slate-400' }}">{{ $past->damaged_count }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm tabular-nums {{ $past->missing_count > 0 ? 'font-semibold text-rose-700' : 'text-slate-400' }}">{{ $past->missing_count }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $past->submitter?->name ?? '—' }}</td>
                                    <td class="px-3 lg:px-4 py-4 text-sm text-slate-500">{{ $past->reviewer?->name ?? '—' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif
    </div>

    {{-- Detail for one line: where it actually is, what state it is in. --}}
    <x-dialog-modal wire:model.live="showDetail" maxWidth="lg">
        <x-slot name="title">{{ __('What did you find?') }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('Only fill in what is different from the register. Saving this counts the item as present unless you have already flagged it.') }}
            </p>

            <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="location-found" value="{{ __('Where it actually is') }}" />
                    <x-input id="location-found" type="text" class="mt-1 block w-full" wire:model="locationFound" />
                    <x-input-error for="locationFound" class="mt-2" />
                </div>
                <div>
                    <x-label for="condition-found" value="{{ __('Condition') }}" />
                    <select id="condition-found" wire:model="conditionFound" 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="">{{ __('Unchanged') }}</option>
                        @foreach ($conditions as $condition)
                            <option value="{{ $condition }}">{{ $condition }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="conditionFound" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="line-note" value="{{ __('Note') }}" />
                    <textarea id="line-note" rows="2" wire:model="lineNote"
                        placeholder="{{ __('e.g. left roller cracked, still usable') }}"
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="lineNote" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeDetail" type="button">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveDetail" type="button" wire:loading.attr="disabled" wire:target="saveDetail">
                <span wire:loading.remove wire:target="saveDetail">{{ __('Save') }}</span>
                <span wire:loading wire:target="saveDetail">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Send the finished sheet up. --}}
    <x-dialog-modal wire:model.live="showSubmit" maxWidth="lg">
        <x-slot name="title">{{ __('Send the count for approval') }}</x-slot>

        <x-slot name="content">
            @if ($sheet)
                <p class="text-sm text-slate-600">
                    {{ __('All :total item(s) have been answered: :present present, :damaged damaged, :missing missing. A director will check it over and sign it off.', [
                        'total' => $sheet->lineCount(),
                        'present' => $sheet->resultCount(AssetVerification::PRESENT),
                        'damaged' => $sheet->resultCount(AssetVerification::DAMAGED),
                        'missing' => $sheet->resultCount(AssetVerification::MISSING),
                    ]) }}
                </p>

                <div class="mt-4">
                    <x-label for="submit-notes" value="{{ __('Anything they should know (optional)') }}" />
                    <textarea id="submit-notes" rows="3" wire:model="submitNotes"
                        placeholder="{{ __('e.g. the spare heat press was out for repair at Zim Machines all week') }}"
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="submitNotes" class="mt-2" />
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showSubmit', false)" type="button">{{ __('Not yet') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="submit" type="button" wire:loading.attr="disabled" wire:target="submit">
                <span wire:loading.remove wire:target="submit">{{ __('Send for approval') }}</span>
                <span wire:loading wire:target="submit">{{ __('Sending…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- A director's ruling. --}}
    <x-dialog-modal wire:model.live="showReview" maxWidth="lg">
        <x-slot name="title">{{ __('Review the count') }}</x-slot>

        <x-slot name="content">
            @if ($sheet)
                <p class="text-sm text-slate-600">
                    {{ __(':who checked all :total item(s) — :present present, :damaged damaged, :missing missing.', [
                        'who' => $sheet->submitter?->name ?? __('Production'),
                        'total' => $sheet->lineCount(),
                        'present' => $sheet->resultCount(AssetVerification::PRESENT),
                        'damaged' => $sheet->resultCount(AssetVerification::DAMAGED),
                        'missing' => $sheet->resultCount(AssetVerification::MISSING),
                    ]) }}
                </p>

                <p class="mt-2 text-sm text-slate-500">
                    {{ __('Approving stamps every item as verified today and applies the locations and conditions they corrected. Sending it back changes nothing and reopens the sheet.') }}
                </p>

                <div class="mt-4">
                    <x-label for="review-note" value="{{ __('Note, or the question you are sending back') }}" />
                    <textarea id="review-note" rows="3" wire:model="reviewNote"
                        placeholder="{{ __('e.g. the Epson was signed out to Ngoni in July — check the store before we call it missing') }}"
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="reviewNote" class="mt-2" />
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showReview', false)" type="button">{{ __('Cancel') }}</x-secondary-button>

            <button
                type="button"
                wire:click="sendBack"
                class="ms-3 inline-flex items-center gap-2 rounded-xl border border-amber-200 bg-white px-4 py-2.5 text-sm font-semibold text-amber-700 shadow-sm transition hover:bg-amber-50"
            >
                <x-icon name="chat-bubble-left-right" class="h-4 w-4" />
                {{ __('Send back') }}
            </button>

            <x-button class="ms-3" wire:click="approve" type="button" wire:loading.attr="disabled" wire:target="approve">
                <span wire:loading.remove wire:target="approve">{{ __('Approve') }}</span>
                <span wire:loading wire:target="approve">{{ __('Approving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>