@props([
    'model',
    'label' => null,
    'placeholder' => '',
    'minHeight' => '8rem',
])

@php
    $btn = 'flex h-8 w-8 items-center justify-center rounded-lg text-slate-600 transition hover:bg-slate-200 hover:text-slate-900';
@endphp

<div>
    @if ($label)
        <x-label :value="$label" />
    @endif

    <div
        class="mt-1"
        wire:ignore
        x-data="richEditor(@js($model))"
    >
        <div class="overflow-hidden rounded-xl border border-slate-300 shadow-sm transition focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
            <div class="flex flex-wrap items-center gap-0.5 border-b border-slate-200 bg-slate-50 px-1.5 py-1">
                <button type="button" class="{{ $btn }} font-bold" @click="cmd('bold')" title="{{ __('Bold') }}">B</button>
                <button type="button" class="{{ $btn }} font-serif italic" @click="cmd('italic')" title="{{ __('Italic') }}">I</button>
                <button type="button" class="{{ $btn }} underline" @click="cmd('underline')" title="{{ __('Underline') }}">U</button>
                <span class="mx-1 h-5 w-px bg-slate-200"></span>
                <button type="button" class="{{ $btn }}" @click="cmd('insertUnorderedList')" title="{{ __('Bullet list') }}">
                    <x-icon name="list-bullet" class="h-4 w-4" />
                </button>
                <button type="button" class="{{ $btn }}" @click="cmd('insertOrderedList')" title="{{ __('Numbered list') }}">
                    <x-icon name="numbered-list" class="h-4 w-4" />
                </button>
            </div>
            <div
                x-ref="editor"
                contenteditable="true"
                @input="sync()"
                @blur="sync()"
                data-placeholder="{{ $placeholder }}"
                class="rich-input px-3 py-2 text-sm text-slate-800 focus:outline-none"
                style="min-height: {{ $minHeight }};"
            ></div>
        </div>
    </div>

    <x-input-error :for="$model" class="mt-2" />
</div>