@php
    /**
     * The job's products, managed as units of work inside the one job.
     *
     * One invoice is one job. A sale of three products is still one job and one
     * invoice, so nothing here creates or splits jobs: it arranges the products
     * of THIS job so each can be run, dated, owned and costed on its own, or
     * compiled with the ones it is genuinely made alongside — or, where one
     * product is really several pieces of work (three flags, three designs),
     * split into pieces that each carry their own state, artwork and notes.
     */
    $statusMeta = [
        'pending'       => ['label' => __('Not started'),   'color' => 'slate',   'icon' => 'clock',          'bar' => 'bg-slate-300'],
        'in_production' => ['label' => __('In production'), 'color' => 'sky',     'icon' => 'cog-6-tooth',    'bar' => 'bg-sky-500'],
        'on_hold'       => ['label' => __('On hold'),       'color' => 'amber',   'icon' => 'stop',          'bar' => 'bg-amber-500'],
        'done'          => ['label' => __('Done'),          'color' => 'emerald', 'icon' => 'check-circle',   'bar' => 'bg-emerald-500'],
    ];

    $initials = function (?string $name): string {
        $words = preg_split('/\s+/', trim((string) $name)) ?: [];
        return strtoupper(\Illuminate\Support\Str::substr($words[0] ?? '?', 0, 1) . (isset($words[1]) ? \Illuminate\Support\Str::substr($words[1], 0, 1) : '')) ?: '?';
    };

    $selectedCount = count($selected);
@endphp

<div class="space-y-4">

    {{-- ============ ROLL-UP STRIP ============ --}}
    @php
        $tiles = [
            ['label' => __('Products'),      'value' => $roll['total'],                         'icon' => 'cube',         'tone' => 'indigo',  'tag' => trans_choice('{1} one unit of work|[2,*] :count units of work', $roll['total'], ['count' => $roll['total']])],
            ['label' => __('In production'), 'value' => $roll['in_production'],                 'icon' => 'cog-6-tooth',  'tone' => 'sky',     'tag' => __('being made now')],
            ['label' => __('Finished'),      'value' => $roll['done'].' / '.$roll['total'],     'icon' => 'check-circle', 'tone' => $roll['all_done'] ? 'emerald' : 'slate', 'tag' => $roll['all_done'] ? __('all products done') : __('still open')],
            ['label' => __('Real progress'), 'value' => $roll['progress'].'%',                  'icon' => 'chart-bar',    'tone' => 'violet',  'tag' => __('weighted by sale value')],
        ];

        // A hybrid job splits its work, so the board says how much of it left.
        if ($isHybrid) {
            $tiles[] = ['label' => __('Outsourced'), 'value' => $roll['outsourced'].' / '.$roll['total'], 'icon' => 'truck', 'tone' => $roll['outsourced'] > 0 ? 'rose' : 'slate', 'tag' => $roll['outsourced'] > 0 ? __('made by a partner') : __('all in-house so far')];
        }

        $tileChip = [
            'indigo'  => 'bg-indigo-50 text-indigo-600',
            'sky'     => 'bg-sky-50 text-sky-600',
            'violet'  => 'bg-violet-50 text-violet-600',
            'emerald' => 'bg-emerald-50 text-emerald-600',
            'rose'    => 'bg-rose-50 text-rose-600',
            'slate'   => 'bg-slate-100 text-slate-500',
        ];
    @endphp

    <x-card class="p-4 sm:p-5">
        <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div class="grid flex-1 grid-cols-2 gap-4 {{ $isHybrid ? 'sm:grid-cols-3 xl:grid-cols-5' : 'sm:grid-cols-4' }}">
                @foreach ($tiles as $tile)
                    <div wire:key="roll-{{ $loop->index }}" class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $tileChip[$tile['tone']] }}">
                            <x-icon :name="$tile['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="truncate text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $tile['label'] }}</p>
                            <p class="text-base font-bold text-slate-900 tabular-nums">{{ $tile['value'] }}</p>
                            <p class="truncate text-[10px] text-slate-400">{{ $tile['tag'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>

            @if ($canUpdate && $roll['total'] > 0 && $roll['progress'] !== (int) $job->progress)
                <button type="button" wire:click="applyProgress"
                        class="inline-flex shrink-0 items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-xs font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50">
                    <x-icon name="arrow-path" class="h-4 w-4" />
                    {{ __('Set job progress to :n%', ['n' => $roll['progress']]) }}
                </button>
            @endif
        </div>
    </x-card>

    {{-- ============ TOOLBAR ============ --}}
    @if ($canUpdate && count($units) > 1)
        <div class="flex flex-col gap-3 rounded-2xl border border-slate-200 bg-slate-50/70 p-3 sm:flex-row sm:items-center sm:justify-between">
            <p class="text-xs text-slate-500">
                <x-icon name="sparkles" class="mr-1 inline h-3.5 w-3.5 text-slate-400" />
                {{ $selectedCount > 0
                    ? trans_choice('{1} :count product selected|[2,*] :count products selected', $selectedCount, ['count' => $selectedCount])
                    : __('Tick the products you make together to compile them into one unit.') }}
            </p>
            <div class="flex items-center gap-2">
                @if ($selectedCount > 0)
                    <button type="button" wire:click="$set('selected', [])"
                            class="rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition hover:text-slate-700">{{ __('Clear') }}</button>
                @endif
                <button type="button" wire:click="openCompile" @disabled($selectedCount < 2)
                        class="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3.5 py-2 text-xs font-semibold text-white shadow-sm transition hover:bg-indigo-700 disabled:cursor-not-allowed disabled:opacity-40">
                    <x-icon name="squares-2x2" class="h-4 w-4" />{{ __('Compile into one unit') }}
                </button>
            </div>
        </div>
        <x-input-error for="selected" />
    @endif

    {{-- ============ PRODUCTS ============ --}}
    @if (count($units) === 0)
        <x-empty-state
            icon="cube"
            :title="__('No products linked')"
            :message="__('This job is not linked to any product on its invoice yet. Edit the job and tick what it is producing.')"
        />
    @else
        <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
            @foreach ($groups as $group)
                @if (! $group['is_split'])
                    {{-- A product that is one piece of work: its own card, as it
                         has always been. --}}
                    @php $unit = $group['units'][0]; $compact = false; @endphp
                    <x-card wire:key="unit-{{ $unit['key'] }}" class="flex flex-col overflow-hidden transition hover:shadow-md">
                        @include('livewire.jobs.partials.product-unit-card')
                    </x-card>
                @else
                    {{-- A product made in several pieces.

                         The pieces are cards in their own right — a piece IS a
                         unit of work — but they sit on the product's own surface
                         rather than on the page, so the board reads as "this
                         product, made in three" instead of five loose things.
                         The tinted well behind them is what does that work: the
                         cards float on it, and the eye reads the boundary of the
                         group before it reads the cards inside. --}}
                    @php
                        $groupTone = $group['revenue'] <= 0
                            ? 'slate'
                            : ($group['margin'] >= 30 ? 'emerald' : ($group['margin'] >= 10 ? 'amber' : 'rose'));
                        $groupPill = [
                            'emerald' => 'bg-emerald-50 text-emerald-700 ring-emerald-200',
                            'amber'   => 'bg-amber-50 text-amber-700 ring-amber-200',
                            'rose'    => 'bg-rose-50 text-rose-700 ring-rose-200',
                            'slate'   => 'bg-slate-100 text-slate-500 ring-slate-200',
                        ][$groupTone];
                    @endphp

                    <x-card wire:key="group-{{ $group['key'] }}" class="flex flex-col overflow-hidden xl:col-span-2">
                        {{-- The product itself: one sale, one roll-up. --}}
                        <div class="flex flex-wrap items-start justify-between gap-x-6 gap-y-4 p-5">
                            <div class="flex min-w-0 items-start gap-3.5">
                                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-indigo-50 text-indigo-600">
                                    <x-icon name="cube" class="h-5 w-5" />
                                </span>
                                <div class="min-w-0">
                                    <div class="flex flex-wrap items-center gap-2">
                                        <h3 class="truncate text-base font-semibold tracking-tight text-slate-900">{{ $group['label'] }}</h3>
                                        <x-badge color="indigo" title="{{ __('This one product is made in several pieces') }}">
                                            <x-icon name="scissors" class="h-3 w-3" />
                                            {{ trans_choice('[2,*]:count pieces', $group['total'], ['count' => $group['total']]) }}
                                        </x-badge>
                                        @if ($group['all_done'])
                                            <x-badge color="emerald"><x-icon name="check-circle" class="h-3 w-3" />{{ __('All done') }}</x-badge>
                                        @endif
                                    </div>
                                    <p class="mt-1 text-xs text-slate-500">
                                        <span class="tabular-nums font-medium text-slate-600">{{ rtrim(rtrim(number_format($group['qty'], 2), '0'), '.') }}</span> {{ __('units sold') }}
                                        <span class="mx-1.5 text-slate-300">·</span>
                                        <span class="tabular-nums font-medium text-slate-600">{{ $group['done'] }}/{{ $group['total'] }}</span> {{ __('pieces finished') }}
                                        @if ($group['hours'] > 0)
                                            <span class="mx-1.5 text-slate-300">·</span>
                                            <span class="tabular-nums font-medium text-slate-600">{{ number_format($group['hours'], 2) }} h</span> {{ __('logged') }}
                                        @endif
                                    </p>
                                </div>
                            </div>

                            <div class="flex flex-1 flex-wrap items-center justify-end gap-x-6 gap-y-3">
                                @if ($canSeeMoney)
                                    <div class="flex items-center gap-5">
                                        @foreach ([
                                            ['label' => __('Revenue'), 'value' => number_format($group['revenue'], 2), 'tone' => 'text-slate-900'],
                                            ['label' => __('Cost'), 'value' => $group['has_cost'] ? number_format($group['cost'], 2) : __('none'), 'tone' => $group['has_cost'] ? 'text-slate-900' : 'text-amber-600'],
                                            ['label' => __('Gross profit'), 'value' => number_format($group['profit'], 2), 'tone' => $group['profit'] >= 0 ? 'text-slate-900' : 'text-rose-600'],
                                        ] as $stat)
                                            <div class="text-right">
                                                <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $stat['label'] }}</p>
                                                <p class="text-sm font-semibold tabular-nums {{ $stat['tone'] }}">{{ $stat['value'] }}</p>
                                            </div>
                                        @endforeach
                                        <span class="inline-flex items-center gap-1 self-end whitespace-nowrap rounded-full px-2.5 py-1 text-xs font-semibold ring-1 tabular-nums {{ $groupPill }}">
                                            {{ $group['revenue'] > 0 ? number_format($group['margin'], 1).'%' : '—' }}
                                        </span>
                                    </div>
                                @endif

                                @if ($canUpdate)
                                    <div class="flex items-center gap-1.5">
                                        <button type="button" wire:click="openSplit('{{ $group['units'][0]['key'] }}')"
                                                class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-2.5 py-1.5 text-xs font-semibold text-slate-600 shadow-sm transition hover:border-indigo-300 hover:text-indigo-700">
                                            <x-icon name="scissors" class="h-3.5 w-3.5" />{{ __('Edit pieces') }}
                                        </button>
                                        <button type="button" wire:click="unsplit({{ $group['line_id'] }})"
                                                wire:confirm="{{ __('Put this product back together as one piece of work? Files and costs go back to the product, and notes stuck on a piece move up to the job.') }}"
                                                class="inline-flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs font-medium text-slate-500 transition hover:bg-rose-50 hover:text-rose-600">
                                            {{ __('Put back together') }}
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- The product's own progress, weighted by how much of
                             it each piece covers. --}}
                        <div class="px-5">
                            <div class="h-1 w-full overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-indigo-500 transition-all" style="width: {{ max(2, (int) $group['progress']) }}%"></div>
                            </div>
                        </div>

                        {{-- The pieces, on the product's own surface. --}}
                        <div class="mt-4 border-t border-slate-100 bg-slate-50/70 p-4">
                            <div class="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3">
                                @foreach ($group['units'] as $unit)
                                    @php $compact = true; @endphp
                                    <div wire:key="unit-{{ $unit['key'] }}"
                                         class="flex flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:border-indigo-200 hover:shadow-md">
                                        @include('livewire.jobs.partials.product-unit-card')
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </x-card>
                @endif
            @endforeach
        </div>
    @endif

    {{-- ============ FILES ON ONE PRODUCT ============ --}}
    <x-dialog-modal wire:model.live="showFilesModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Files for :product', ['product' => $filesLabel]) }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('Artwork, references and print-ready files for this piece of work. They stay with it, so whoever picks it up is looking at the right drawing, and they show on the job’s Files tab too.') }}
            </p>

            @if ($canUpdate)
                @php
                    $maxLabel = $this->uploadMaxKb() >= 1024
                        ? round($this->uploadMaxKb() / 1024).' MB'
                        : $this->uploadMaxKb().' KB';
                @endphp

                <x-media-capture target="productUpload" class="mt-4" :max-kb="$this->uploadMaxKb()"
                                 :hint="__('Up to :size per file. Photos and clips are captured here on the page.', ['size' => $maxLabel])" />
                <x-input-error for="productUpload" class="mt-1.5" />
                <x-input-error for="productUpload.*" class="mt-1.5" />
            @endif

            @if ($productFiles->isEmpty())
                <p class="mt-4 rounded-xl border border-dashed border-slate-200 px-3 py-6 text-center text-sm text-slate-400">
                    {{ __('Nothing filed against this yet.') }}
                </p>
            @else
                <div class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
                    @foreach ($productFiles as $file)
                        @php $href = $file->staffUrl(); @endphp
                        <div wire:key="product-file-{{ $file->id }}" class="overflow-hidden rounded-xl border border-slate-200 bg-white">
                            @if ($file->kind === 'video')
                                <div class="aspect-[4/3] w-full bg-slate-900">
                                    <video src="{{ $href }}" controls preload="metadata" playsinline class="h-full w-full object-contain"></video>
                                </div>
                            @elseif ($file->kind === 'audio')
                                <div class="flex aspect-[4/3] w-full flex-col items-center justify-center gap-2 bg-brand-50 px-3">
                                    <span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-brand-700 shadow-sm">
                                        <x-icon name="microphone" class="h-4 w-4" />
                                    </span>
                                    <audio src="{{ $href }}" controls preload="metadata" class="h-8 w-full"></audio>
                                </div>
                            @else
                                <a href="{{ $href }}" target="_blank" rel="noopener" class="block">
                                    @if ($file->is_image)
                                        <div class="aspect-[4/3] w-full overflow-hidden bg-slate-50">
                                            <img src="{{ $href }}" alt="{{ $file->original_name }}" loading="lazy" class="h-full w-full object-cover" />
                                        </div>
                                    @else
                                        <div class="flex aspect-[4/3] w-full items-center justify-center bg-slate-50">
                                            <span class="rounded-lg bg-rose-50 px-3 py-1.5 text-xs font-bold text-rose-600">{{ $file->extension_label }}</span>
                                        </div>
                                    @endif
                                </a>
                            @endif

                            <div class="flex items-center justify-between gap-2 p-2.5">
                                <div class="min-w-0">
                                    <p class="truncate text-[11px] font-medium text-slate-700" title="{{ $file->original_name }}">{{ $file->original_name }}</p>
                                    <p class="text-[10px] text-slate-400">{{ $file->extension_label }} · {{ $file->human_size }}</p>
                                </div>
                                @if ($canUpdate)
                                    <button type="button" wire:click="deleteProductFile({{ $file->id }})"
                                            wire:confirm="{{ __('Delete this file?') }}"
                                            class="shrink-0 text-slate-300 transition hover:text-rose-500">
                                        <x-icon name="trash" class="h-4 w-4" />
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeFiles" wire:loading.attr="disabled">{{ __('Done') }}</x-secondary-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ============ SPLIT INTO PIECES MODAL ============ --}}
    <x-dialog-modal wire:model.live="showSplitModal" maxWidth="2xl">
        <x-slot name="title">{{ __('Pieces of :product', ['product' => $splitProductName]) }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('Three flags with three different designs are three pieces of work: each is drawn, approved and finished on its own. Give each piece a name and say how many of the quantity sold it covers.') }}
            </p>
            <p class="mt-2 rounded-xl bg-slate-50 px-3 py-2 text-xs text-slate-500 ring-1 ring-slate-200">
                <x-icon name="information-circle" class="mr-1 inline h-3.5 w-3.5 text-slate-400" />
                {{ __('The invoice does not change. It still reads :product — :qty, for the same money; the pieces only say how it is made, and each one carries its own artwork, costs, notes and margin.', [
                    'product' => $splitProductName,
                    'qty' => rtrim(rtrim(number_format($splitLineQty, 2), '0'), '.'),
                ]) }}
            </p>

            @if ($canUpdate)
                <div class="mt-4 flex flex-wrap items-center gap-1.5">
                    <span class="mr-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Quick split') }}</span>
                    @foreach ([2, 3, 4, 5] as $n)
                        <button type="button" wire:click="spreadPieces({{ $n }})"
                                class="rounded-lg px-2.5 py-1 text-xs font-semibold ring-1 ring-inset transition
                                       {{ count($splitRows) === $n ? 'bg-slate-900 text-white ring-slate-900' : 'bg-white text-slate-600 ring-slate-200 hover:text-indigo-700 hover:ring-indigo-300' }}">
                            {{ trans_choice('[2,*]:count pieces', $n, ['count' => $n]) }}
                        </button>
                    @endforeach
                </div>
            @endif

            <div class="mt-3 space-y-2">
                @foreach ($splitRows as $i => $row)
                    <div wire:key="piece-{{ $i }}-{{ $row['id'] ?? 'new' }}" class="flex items-end gap-2 rounded-xl border border-slate-200 bg-white p-2.5">
                        <span class="mb-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-slate-100 text-[11px] font-bold text-slate-500">{{ $i + 1 }}</span>

                        <div class="min-w-0 flex-1">
                            <x-label for="piece-label-{{ $i }}" :value="__('Piece name')" class="text-[11px]" />
                            <x-input id="piece-label-{{ $i }}" type="text" wire:model="splitRows.{{ $i }}.label" class="mt-1 block w-full"
                                     placeholder="{{ __('e.g. Design A') }}" />
                            <x-input-error for="splitRows.{{ $i }}.label" class="mt-1" />
                        </div>

                        <div class="w-24 shrink-0">
                            <x-label for="piece-qty-{{ $i }}" :value="__('Units')" class="text-[11px]" />
                            <x-input id="piece-qty-{{ $i }}" type="number" step="0.01" min="0.01" wire:model="splitRows.{{ $i }}.qty" class="mt-1 block w-full text-right tabular-nums" />
                            <x-input-error for="splitRows.{{ $i }}.qty" class="mt-1" />
                        </div>

                        <div class="mb-1 w-8 shrink-0 text-center">
                            @if (count($splitRows) > 1)
                                <button type="button" wire:click="removePiece({{ $i }})" title="{{ __('Remove this piece') }}"
                                        class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-slate-400 transition hover:bg-rose-50 hover:text-rose-600">
                                    <x-icon name="trash" class="h-4 w-4" />
                                </button>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>

            <x-input-error for="splitRows" class="mt-2" />

            @php
                $given = collect($splitRows)->sum(fn ($row) => (float) ($row['qty'] ?? 0));
                $balanced = abs($given - $splitLineQty) < 0.011;
            @endphp

            <div class="mt-3 flex flex-wrap items-center justify-between gap-2">
                <button type="button" wire:click="addPiece" class="inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 transition hover:text-indigo-700">
                    <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Add a piece') }}
                </button>

                <p class="text-xs {{ $balanced ? 'text-slate-500' : 'font-semibold text-rose-600' }}">
                    {{ __('Pieces add up to :given of :qty sold', [
                        'given' => rtrim(rtrim(number_format($given, 2), '0'), '.'),
                        'qty' => rtrim(rtrim(number_format($splitLineQty, 2), '0'), '.'),
                    ]) }}
                </p>
            </div>
        </x-slot>

        <x-slot name="footer">
            @if (count($splitRows) > 1)
                <button type="button" wire:click="unsplit({{ $splitLineId ?? 0 }})"
                        wire:confirm="{{ __('Put this product back together as one piece of work?') }}"
                        class="mr-auto text-xs font-semibold text-rose-600 transition hover:text-rose-700">{{ __('Put back together') }}</button>
            @endif
            <x-secondary-button wire:click="$set('showSplitModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ml-3" wire:click="saveSplit" wire:loading.attr="disabled" wire:target="saveSplit">
                <span wire:loading.remove wire:target="saveSplit">{{ __('Save pieces') }}</span>
                <span wire:loading wire:target="saveSplit">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ============ COMPILE MODAL ============ --}}
    <x-dialog-modal wire:model.live="showCompileModal" maxWidth="lg">
        <x-slot name="title">{{ __('Compile into one unit') }}</x-slot>

        <x-slot name="content">
            <p class="text-sm text-slate-500">
                {{ __('These products are made together, so from here they are scheduled, assigned and finished as one. Costs stay tagged to each product, so the profit of each is still visible.') }}
            </p>

            <div class="mt-4 space-y-1.5">
                @foreach ($units as $unit)
                    @if (in_array((string) ($unit['line_ids'][0] ?? ''), array_map('strval', $selected), true))
                        <div wire:key="compile-{{ $unit['key'] }}" class="flex items-center gap-2 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700">
                            <x-icon name="cube" class="h-4 w-4 text-slate-400" />{{ $unit['label'] }}
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="mt-4">
                <x-label for="compile-label" :value="__('Name for the unit (optional)')" />
                <x-input id="compile-label" type="text" wire:model="compileLabel" class="mt-1 block w-full" placeholder="{{ __('e.g. Vinyl run, Shop-front set') }}" />
                <x-input-error for="compileLabel" class="mt-1" />
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showCompileModal', false)" wire:loading.attr="disabled">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ml-3" wire:click="compile" wire:loading.attr="disabled">{{ __('Compile') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>