@if ($record->exists)
    <div class="mt-8 max-w-5xl space-y-5">

        <div class="admin-card p-5 sm:p-6">
            <h2 class="mb-1 text-base">Content blocks ({{ $blocks->count() }})</h2>
            <p class="mb-5 text-sm text-text-muted">Blocks render below the main content, in the order shown.</p>

            @if ($blocks->isNotEmpty())
                <ul class="mb-6 divide-y divide-border">
                    @foreach ($blocks as $block)
                        <li class="flex items-start justify-between gap-4 py-3">
                            <div class="flex min-w-0 gap-4">
                                @if ($block->image)
                                    <img src="{{ thumb_url($block->image) }}" alt=""
                                         class="size-12 shrink-0 rounded-lg border border-border object-cover">
                                @endif

                                <div class="min-w-0">
                                    <span class="pill bg-primary-50 text-primary">{{ $block->typeLabel() }}</span>
                                    <p class="mt-1.5 truncate text-sm font-medium text-text">{{ $block->heading ?: '(no heading)' }}</p>
                                    @if ($block->subheading)
                                        <p class="truncate text-xs text-text-muted">{{ $block->subheading }}</p>
                                    @endif
                                    @if ($rows = $block->rows())
                                        <p class="text-xs text-text-muted">{{ count($rows) }} rows</p>
                                    @endif
                                </div>
                            </div>

                            <form action="{{ route('admin.pages.blocks.destroy', [$record, $block]) }}" method="POST"
                                  onsubmit="return confirm('Remove this block?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="rounded p-1.5 text-text-muted hover:bg-error/5 hover:text-error"
                                        aria-label="Remove block">
                                    <x-icon name="trash" class="size-4" />
                                </button>
                            </form>
                        </li>
                    @endforeach
                </ul>
            @endif

            {{--
                One form, type-aware: choosing a block type reveals only the
                fields that type actually uses, so the builder stays usable as
                more block types are added.
            --}}
            <form action="{{ route('admin.pages.blocks.store', $record) }}" method="POST" enctype="multipart/form-data"
                  class="border-t border-border pt-6" x-data="{ type: 'text', rows: [{}] }">
                @csrf

                <div class="grid gap-5 sm:grid-cols-2">
                    <div>
                        <label for="block-type" class="form-label">Block type</label>
                        <select id="block-type" name="type" x-model="type" class="form-input" required>
                            @foreach ($blockTypes as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>

                    <x-form.input name="heading" label="Heading" />
                    <x-form.input name="subheading" label="Subheading" class="sm:col-span-2" />

                    <div class="sm:col-span-2" x-show="['text', 'text_image', 'cta', 'immersive'].includes(type)">
                        <x-form.rich name="body" label="Body" />
                    </div>

                    <div x-show="['text_image', 'immersive', 'hotspots', 'compare'].includes(type)" x-cloak>
                        <x-form.file name="image" label="Image" :preview="false" accept="image/*"
                                     hint="For a comparison block this is the 'before' image." />
                    </div>

                    <div x-show="type === 'compare'" x-cloak>
                        <x-form.file name="image_secondary" label="After image" :preview="false" accept="image/*" />
                    </div>

                    <div class="grid gap-5 sm:col-span-2 sm:grid-cols-2" x-show="type === 'compare'" x-cloak>
                        <x-form.input name="before_label" label="Before label" placeholder="e.g. 2019" />
                        <x-form.input name="after_label" label="After label" placeholder="e.g. 2024" />
                    </div>

                    <div class="sm:col-span-2" x-show="type === 'gallery'" x-cloak>
                        <x-form.file name="gallery[]" label="Gallery images" :preview="false" accept="image/*" multiple
                                     hint="Select several files at once. They render as a masonry grid with a lightbox." />
                    </div>

                    <div class="sm:col-span-2" x-show="type === 'embed'" x-cloak>
                        <x-form.input name="embed_url" type="url" label="Embed URL"
                                      hint="YouTube, Vimeo or a map embed URL." />
                    </div>

                    <div class="grid gap-5 sm:col-span-2 sm:grid-cols-2"
                         x-show="['text_image', 'cta', 'immersive'].includes(type)" x-cloak>
                        <x-form.input name="cta_label" label="Button label" />
                        <x-form.input name="cta_url" label="Button URL" />
                    </div>

                    {{-- Repeatable rows: statistics, timeline entries, accordion items, hotspots. --}}
                    <div class="sm:col-span-2" x-show="['stats', 'timeline', 'accordion', 'hotspots'].includes(type)" x-cloak>
                        <span class="form-label">Rows</span>

                        <template x-for="(row, index) in rows" :key="index">
                            <div class="mb-3 grid gap-3 rounded-lg border border-border p-4 sm:grid-cols-12">
                                <div class="sm:col-span-4">
                                    <input type="text" :name="`rows[${index}][title]`" class="form-input"
                                           :placeholder="type === 'stats' ? 'Value, e.g. 40+'
                                               : type === 'timeline' ? 'Year, e.g. 1986'
                                               : 'Title'">
                                </div>

                                <div :class="type === 'hotspots' ? 'sm:col-span-4' : 'sm:col-span-7'">
                                    <input type="text" :name="`rows[${index}][body]`" class="form-input"
                                           placeholder="Description">
                                </div>

                                <template x-if="type === 'hotspots'">
                                    <div class="grid grid-cols-2 gap-3 sm:col-span-3">
                                        <input type="number" :name="`rows[${index}][x]`" class="form-input"
                                               min="0" max="100" step="0.1" placeholder="X %">
                                        <input type="number" :name="`rows[${index}][y]`" class="form-input"
                                               min="0" max="100" step="0.1" placeholder="Y %">
                                    </div>
                                </template>

                                <div class="flex items-start sm:col-span-1">
                                    <button type="button" @click="rows.splice(index, 1); rows.length || rows.push({})"
                                            class="rounded p-2 text-text-muted hover:bg-error/5 hover:text-error"
                                            aria-label="Remove row">
                                        <x-icon name="trash" class="size-4" />
                                    </button>
                                </div>
                            </div>
                        </template>

                        <button type="button" @click="rows.push({})" class="btn-ghost btn-sm">
                            <x-icon name="plus" class="size-4" /> Add row
                        </button>

                        <p class="form-hint" x-show="type === 'hotspots'">
                            X and Y are percentages measured from the top-left of the image.
                        </p>
                    </div>
                </div>

                <button type="submit" class="btn-primary mt-6">Add block</button>
            </form>
        </div>
    </div>
@endif