bert.hausmans/preregister
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented a block editor for changing the layout of the page

Browse Source
This commit is contained in:
bert.hausmans
2026-04-04 01:17:05 +02:00
parent 0800f7664f
commit ff58e82497
41 changed files with 2706 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

485
resources/views/admin/pages/_blocks_editor.blade.php Normal file
View File

@@ -0,0 +1,485 @@
@php
use Illuminate\Support\Carbon;
$blockEditorState = $page->blocks->map(function ($b) {
$content = $b->content ?? [];
if ($b->type === 'countdown' && ! empty($content['target_datetime'])) {
try {
$content['target_datetime'] = Carbon::parse($content['target_datetime'])
->timezone(config('app.timezone'))
->format('Y-m-d\TH:i');
} catch (\Throwable) {
}
}
return [
'uid' => 'b'.$b->id,
'type' => $b->type,
'sort_order' => $b->sort_order,
'is_visible' => $b->is_visible,
'content' => $content,
];
})->values()->all();
$blockTypesMeta = [
['type' => 'hero', 'label' => __('Hero-sectie'), 'hint' => __('Kop & subkop')],
['type' => 'image', 'label' => __('Afbeelding'), 'hint' => __('Logo of beeld, optionele link')],
['type' => 'benefits', 'label' => __('Voordelen'), 'hint' => __('Lijst met USPs')],
['type' => 'social_proof', 'label' => __('Social proof'), 'hint' => __('Telleraanmeldingen')],
['type' => 'form', 'label' => __('Registratieformulier'), 'hint' => __('Aanmeldformulier')],
['type' => 'countdown', 'label' => __('Afteltimer'), 'hint' => __('Aftellen naar datum')],
['type' => 'text', 'label' => __('Tekst'), 'hint' => __('Vrije tekst')],
['type' => 'cta_banner', 'label' => __('CTA-banner'), 'hint' => __('Knop + link')],
['type' => 'divider', 'label' => __('Scheiding'), 'hint' => __('Lijn of ruimte')],
];
$benefitIcons = ['ticket', 'clock', 'mail', 'users', 'star', 'heart', 'gift', 'music', 'shield', 'check'];
@endphp
<div
x-data="pageBlockEditor({
initialBlocks: @js($blockEditorState),
blockTypes: @js($blockTypesMeta),
storageBase: @js(asset('storage'))
})"
>
<h2 id="page-blocks-heading" class="text-lg font-semibold text-slate-900">{{ __('Pagina-inhoud (blokken)') }}</h2>
<p class="mt-1 text-sm text-slate-600">{{ __('Sleep blokken om de volgorde te wijzigen. Klik op een blok om het te openen of te sluiten. Het oog-icoon verbergt een blok op de publieke pagina.') }}</p>
<div class="mt-4 flex flex-wrap items-center gap-2">
<div class="relative" x-data="{ open: false }">
<button
type="button"
class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm hover:bg-slate-50"
@click="open = !open"
>
{{ __('+ Blok toevoegen') }}
<span class="text-slate-400" x-text="open ? '▲' : '▼'"></span>
</button>
<div
x-show="open"
x-cloak
@click.outside="open = false"
class="absolute left-0 z-20 mt-2 w-full max-w-md rounded-lg border border-slate-200 bg-white py-1 shadow-lg"
>
<template x-for="bt in blockTypes" :key="bt.type">
<button
type="button"
class="flex w-full flex-col items-start gap-0.5 px-4 py-3 text-left text-sm hover:bg-slate-50 disabled:cursor-not-allowed disabled:opacity-50"
@click="addBlock(bt.type); open = false"
x-bind:disabled="bt.type === 'form' && hasFormBlock()"
>
<span class="font-medium text-slate-900" x-text="bt.label"></span>
<span class="text-xs text-slate-500" x-text="bt.hint"></span>
</button>
</template>
</div>
</div>
<button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" @click="expandAll()">
{{ __('Alles uitklappen') }}
</button>
<button type="button" class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50" @click="collapseAll()">
{{ __('Alles inklappen') }}
</button>
</div>
<div class="mt-6 flex flex-col gap-4" x-ref="sortRoot">
<template x-for="block in blocks" :key="block.uid">
<div
class="overflow-hidden rounded-xl border border-slate-200 bg-slate-50/80 shadow-sm"
:class="{ 'opacity-50': !block.is_visible }"
:data-block-uid="block.uid"
>
<input type="hidden" :name="`blocks[${block.uid}][type]`" :value="block.type" />
<input type="hidden" :name="`blocks[${block.uid}][sort_order]`" :value="block.sort_order" />
<input type="hidden" :name="`blocks[${block.uid}][is_visible]`" :value="block.is_visible ? 1 : 0" />
<div
class="flex items-start gap-2 bg-white px-3 py-2"
:class="isCollapsed(block.uid) ? 'rounded-xl' : 'rounded-t-xl border-b border-slate-200'"
>
<button type="button" class="block-drag-handle mt-2 cursor-grab touch-pan-y px-1 text-slate-400 hover:text-slate-600" title="{{ __('Sleep') }}">≡</button>
<button
type="button"
class="min-w-0 flex-1 rounded-lg py-0.5 text-left text-sm font-semibold text-slate-800 hover:bg-slate-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500"
@click="toggleCollapsed(block.uid)"
:aria-expanded="!isCollapsed(block.uid)"
>
<span class="flex items-start gap-2">
<span class="mt-0.5 w-4 shrink-0 text-center text-xs text-slate-500" x-text="isCollapsed(block.uid) ? '▶' : '▼'" aria-hidden="true"></span>
<span class="min-w-0 flex-1">
<span class="block" x-text="blockTypes.find(t => t.type === block.type)?.label || block.type"></span>
<span
x-show="isCollapsed(block.uid) && blockSummary(block) !== ''"
x-cloak
class="mt-0.5 block max-w-full truncate text-xs font-normal text-slate-500"
x-text="blockSummary(block)"
></span>
</span>
</span>
</button>
<div class="flex shrink-0 items-center gap-0.5 self-center">
<button type="button" class="p-1 text-slate-500 hover:text-slate-800" :title="block.is_visible ? '{{ __('Verbergen op publieke pagina') }}' : '{{ __('Tonen') }}'" @click="block.is_visible = !block.is_visible">
<span x-text="block.is_visible ? '👁' : '🚫'"></span>
</button>
<button type="button" class="p-1 text-red-600 hover:text-red-800" @click="requestDelete(block.uid)">✕</button>
</div>
</div>
<div x-show="!isCollapsed(block.uid)" class="space-y-4 p-4">
{{-- Hero --}}
<div x-show="block.type === 'hero'" class="grid gap-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Kop (headline)') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][headline]`" x-model="block.content.headline" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" maxlength="255" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Subkop') }}</label>
<textarea :name="`blocks[${block.uid}][content][subheadline]`" x-model="block.content.subheadline" rows="3" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Eyebrow / label') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][eyebrow_text]`" x-model="block.content.eyebrow_text" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Eyebrow-stijl') }}</label>
<select :name="`blocks[${block.uid}][content][eyebrow_style]`" x-model="block.content.eyebrow_style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="badge">badge</option>
<option value="text">text</option>
<option value="none">none</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Tekstuitlijning') }}</label>
<select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
</div>
{{-- Image --}}
<div x-show="block.type === 'image'" class="grid gap-4">
<template x-if="block.content.image && block.content.image !== ''">
<div class="flex flex-wrap items-center gap-3">
<img :src="storageBase + '/' + block.content.image" alt="" class="h-16 w-auto max-w-[12rem] rounded border border-slate-200 bg-white object-contain p-1" />
<label class="inline-flex items-center gap-2 text-sm text-red-700">
<input type="checkbox" :name="`blocks[${block.uid}][remove_block_image]`" value="1" />
{{ __('Afbeelding verwijderen') }}
</label>
</div>
</template>
<input type="hidden" :name="`blocks[${block.uid}][content][image]`" :value="block.content.image || ''" />
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Afbeelding uploaden') }}</label>
<input type="file" :name="`blocks[${block.uid}][block_image]`" accept="image/jpeg,image/png,image/webp,image/svg+xml,.svg" class="mt-1 block w-full text-sm text-slate-600" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Link-URL (optioneel, bij klik)') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][link_url]`" x-model="block.content.link_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" placeholder="https://…" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Alt-tekst') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][alt]`" x-model="block.content.alt" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Max. breedte (px)') }}</label>
<input type="number" min="48" max="800" :name="`blocks[${block.uid}][content][max_width_px]`" x-model.number="block.content.max_width_px" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Uitlijning') }}</label>
<select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
</div>
</div>
{{-- Benefits --}}
<div x-show="block.type === 'benefits'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Layout') }}</label>
<select :name="`blocks[${block.uid}][content][layout]`" x-model="block.content.layout" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="list">list</option>
<option value="grid">grid</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Max. kolommen') }}</label>
<select :name="`blocks[${block.uid}][content][max_columns]`" x-model.number="block.content.max_columns" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-slate-700">{{ __('Items') }}</span>
<button type="button" class="text-sm font-medium text-indigo-600 hover:text-indigo-500" @click="addBenefitItem(block.uid)">+ {{ __('Voordeel') }}</button>
</div>
<template x-for="(item, idx) in block.content.items" :key="idx">
<div class="flex flex-wrap items-end gap-2 rounded-lg border border-slate-200 bg-white p-3">
<div class="min-w-[8rem] flex-1">
<label class="text-xs text-slate-500">{{ __('Icoon') }}</label>
<select :name="`blocks[${block.uid}][content][items][${idx}][icon]`" x-model="item.icon" class="mt-0.5 block w-full rounded border-slate-300 text-sm">
@foreach ($benefitIcons as $ic)
<option value="{{ $ic }}">{{ $ic }}</option>
@endforeach
</select>
</div>
<div class="min-w-[12rem] flex-[2]">
<label class="text-xs text-slate-500">{{ __('Tekst') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][items][${idx}][text]`" x-model="item.text" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
</div>
<button type="button" class="mb-0.5 text-sm text-red-600 hover:text-red-800" @click="removeBenefitItem(block.uid, idx)">{{ __('Verwijderen') }}</button>
</div>
</template>
</div>
{{-- Social proof --}}
<div x-show="block.type === 'social_proof'" class="grid gap-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Sjabloon (gebruik {count})') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][template]`" x-model="block.content.template" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Minimum aantal (alleen tonen als ≥)') }}</label>
<input type="number" min="0" :name="`blocks[${block.uid}][content][min_count]`" x-model.number="block.content.min_count" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<label class="inline-flex items-center gap-2 text-sm text-slate-700">
<input type="hidden" :name="`blocks[${block.uid}][content][show_animation]`" :value="block.content.show_animation ? 1 : 0" />
<input type="checkbox" @change="block.content.show_animation = $event.target.checked" :checked="block.content.show_animation" />
{{ __('Animatie') }}
</label>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
<select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="pill">pill</option>
<option value="badge">badge</option>
<option value="plain">plain</option>
</select>
</div>
</div>
{{-- Form --}}
<div x-show="block.type === 'form'" class="space-y-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Titel boven formulier') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Beschrijving') }}</label>
<textarea :name="`blocks[${block.uid}][content][description]`" x-model="block.content.description" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
</div>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knoptekst') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_label]`" x-model="block.content.button_label" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knopkleur') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_color]`" x-model="block.content.button_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
</div>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knoptekstkleur') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_text_color]`" x-model="block.content.button_text_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
</div>
<label class="inline-flex items-center gap-2 text-sm text-slate-700">
<input type="hidden" :name="`blocks[${block.uid}][content][show_field_icons]`" :value="block.content.show_field_icons ? 1 : 0" />
<input type="checkbox" @change="block.content.show_field_icons = $event.target.checked" :checked="block.content.show_field_icons" />
{{ __('Iconen bij velden') }}
</label>
<p class="text-xs text-slate-500">{{ __('Voornaam, achternaam en e-mail blijven verplicht ingeschakeld voor de database.') }}</p>
<template x-for="fk in ['first_name','last_name','email','phone']" :key="fk">
<div class="rounded-lg border border-slate-200 bg-white p-3">
<p class="text-sm font-medium capitalize text-slate-800" x-text="fk.replace('_',' ')"></p>
<template x-if="fk === 'phone'">
<label class="mt-2 inline-flex items-center gap-2 text-sm text-slate-700">
<input type="hidden" :name="`blocks[${block.uid}][content][fields][phone][enabled]`" :value="block.content.fields.phone.enabled ? 1 : 0" />
<input type="checkbox" @change="block.content.fields.phone.enabled = $event.target.checked" :checked="block.content.fields.phone.enabled" />
{{ __('Telefoonveld tonen') }}
</label>
</template>
<template x-if="fk !== 'phone'">
<input type="hidden" :name="`blocks[${block.uid}][content][fields][${fk}][enabled]`" value="1" />
<input type="hidden" :name="`blocks[${block.uid}][content][fields][${fk}][required]`" value="1" />
</template>
<div class="mt-2 grid gap-2 sm:grid-cols-2">
<div>
<label class="text-xs text-slate-500">{{ __('Label') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][fields][${fk}][label]`" x-model="block.content.fields[fk].label" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
</div>
<div>
<label class="text-xs text-slate-500">{{ __('Placeholder') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][fields][${fk}][placeholder]`" x-model="block.content.fields[fk].placeholder" class="mt-0.5 block w-full rounded border-slate-300 text-sm" />
</div>
</div>
<template x-if="fk === 'phone'">
<label class="mt-2 inline-flex items-center gap-2 text-sm text-slate-700">
<input type="hidden" :name="`blocks[${block.uid}][content][fields][phone][required]`" :value="block.content.fields.phone.required ? 1 : 0" />
<input type="checkbox" @change="block.content.fields.phone.required = $event.target.checked" :checked="block.content.fields.phone.required" />
{{ __('Telefoon verplicht') }}
</label>
</template>
</div>
</template>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Privacytekst') }}</label>
<textarea :name="`blocks[${block.uid}][content][privacy_text]`" x-model="block.content.privacy_text" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Privacy-URL') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][privacy_url]`" x-model="block.content.privacy_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" placeholder="https://…" />
</div>
</div>
{{-- Countdown --}}
<div x-show="block.type === 'countdown'" class="grid gap-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Doeldatum / -tijd') }}</label>
<input type="datetime-local" :name="`blocks[${block.uid}][content][target_datetime]`" x-model="block.content.target_datetime" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Na afloop') }}</label>
<select :name="`blocks[${block.uid}][content][expired_action]`" x-model="block.content.expired_action" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="hide">hide</option>
<option value="show_message">show_message</option>
<option value="reload">reload</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Bericht (bij show_message)') }}</label>
<textarea :name="`blocks[${block.uid}][content][expired_message]`" x-model="block.content.expired_message" rows="2" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
<select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="large">large</option>
<option value="compact">compact</option>
</select>
</div>
<label class="inline-flex items-center gap-2 text-sm text-slate-700">
<input type="hidden" :name="`blocks[${block.uid}][content][show_labels]`" :value="block.content.show_labels ? 1 : 0" />
<input type="checkbox" @change="block.content.show_labels = $event.target.checked" :checked="block.content.show_labels" />
{{ __('Labels tonen') }}
</label>
@foreach (['days' => 'dagen', 'hours' => 'uren', 'minutes' => 'minuten', 'seconds' => 'seconden'] as $lk => $lab)
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Label :key', ['key' => $lk]) }}</label>
<input
type="text"
:name="`blocks[${block.uid}][content][labels][{{ $lk }}]`"
x-model="block.content.labels['{{ $lk }}']"
class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"
/>
</div>
@endforeach
</div>
{{-- Text --}}
<div x-show="block.type === 'text'" class="grid gap-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Titel') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][title]`" x-model="block.content.title" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Tekst') }}</label>
<textarea :name="`blocks[${block.uid}][content][body]`" x-model="block.content.body" rows="6" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Tekstgrootte') }}</label>
<select :name="`blocks[${block.uid}][content][text_size]`" x-model="block.content.text_size" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="sm">sm</option>
<option value="base">base</option>
<option value="lg">lg</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Uitlijning') }}</label>
<select :name="`blocks[${block.uid}][content][text_alignment]`" x-model="block.content.text_alignment" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="center">center</option>
<option value="left">left</option>
<option value="right">right</option>
</select>
</div>
</div>
{{-- CTA --}}
<div x-show="block.type === 'cta_banner'" class="grid gap-4">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Tekst') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][text]`" x-model="block.content.text" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knoptekst') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_label]`" x-model="block.content.button_label" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knop-URL') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_url]`" x-model="block.content.button_url" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Knopkleur') }}</label>
<input type="text" :name="`blocks[${block.uid}][content][button_color]`" x-model="block.content.button_color" class="mt-1 block w-full rounded-lg border-slate-300 font-mono text-sm shadow-sm" />
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
<select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="inline">inline</option>
<option value="stacked">stacked</option>
</select>
</div>
</div>
{{-- Divider --}}
<div x-show="block.type === 'divider'" class="grid gap-4 sm:grid-cols-2">
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Stijl') }}</label>
<select :name="`blocks[${block.uid}][content][style]`" x-model="block.content.style" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="line">line</option>
<option value="dots">dots</option>
<option value="space_only">space_only</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-slate-700">{{ __('Ruimte') }}</label>
<select :name="`blocks[${block.uid}][content][spacing]`" x-model="block.content.spacing" class="mt-1 block w-full rounded-lg border-slate-300 text-sm shadow-sm">
<option value="small">small</option>
<option value="medium">medium</option>
<option value="large">large</option>
</select>
</div>
</div>
</div>
<div
x-show="confirmDeleteUid === block.uid"
x-cloak
class="border-t border-red-100 bg-red-50 px-4 py-3 text-sm text-red-900"
>
<p>{{ __('Dit blok verwijderen?') }}</p>
<div class="mt-2 flex gap-2">
<button type="button" class="rounded bg-red-600 px-3 py-1.5 font-medium text-white hover:bg-red-500" @click="removeBlock(block.uid)">{{ __('Verwijderen') }}</button>
<button type="button" class="rounded border border-slate-300 bg-white px-3 py-1.5 font-medium text-slate-700 hover:bg-slate-50" @click="cancelDelete()">{{ __('Annuleren') }}</button>
</div>
</div>
</div>
</template>
</div>
</div>