@props([
    'name',
    'label' => null,
    'value' => '',
    'autosaveUrl' => null,
    'help' => null,
    'error' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :help="$help" :error="$resolvedError">
    <div x-data="richText({ content: @js($value), fieldName: @js($name), autosaveUrl: @js($autosaveUrl) })"
         class="overflow-hidden rounded-xl border border-slate-300 shadow-sm">
        <input type="hidden" name="{{ $name }}" :value="html">

        <div class="flex flex-wrap items-center gap-1 border-b border-slate-200 bg-slate-50 px-2 py-1.5">
            @php
                $toolbarButton = 'grid h-8 w-8 place-items-center rounded-lg text-slate-600 transition hover:bg-slate-200';
            @endphp
            <button type="button" @click="run('toggleBold')" :class="isActive('bold') && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Bold"><i class="fa-solid fa-bold text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('toggleItalic')" :class="isActive('italic') && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Italic"><i class="fa-solid fa-italic text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="setHeading(2)" :class="isActive('heading', { level: 2 }) && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Heading"><i class="fa-solid fa-heading text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('toggleBulletList')" :class="isActive('bulletList') && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Bullet list"><i class="fa-solid fa-list-ul text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('toggleOrderedList')" :class="isActive('orderedList') && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Numbered list"><i class="fa-solid fa-list-ol text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('toggleBlockquote')" :class="isActive('blockquote') && 'bg-primary/10 text-primary'" class="{{ $toolbarButton }}" aria-label="Quote"><i class="fa-solid fa-quote-left text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="insertImage()" class="{{ $toolbarButton }}" aria-label="Insert image"><i class="fa-solid fa-image text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('undo')" class="{{ $toolbarButton }}" aria-label="Undo"><i class="fa-solid fa-rotate-left text-xs" aria-hidden="true"></i></button>
            <button type="button" @click="run('redo')" class="{{ $toolbarButton }}" aria-label="Redo"><i class="fa-solid fa-rotate-right text-xs" aria-hidden="true"></i></button>
            <span x-show="saving" x-cloak class="ml-auto text-xs text-slate-400">Saving…</span>
        </div>

        <div x-ref="editor" class="px-4 py-3 text-sm text-slate-700 focus:outline-none"></div>
    </div>
</x-forms.field>