@props([
    'model',
    'label' => null,
    'minHeight' => '20rem',
    'key' => 'default',
])

@php
    $btn = 'flex h-8 min-w-8 items-center justify-center rounded-lg px-2 text-sm text-slate-600 transition hover:bg-slate-200 hover:text-slate-900';
    $active = 'bg-indigo-100 text-indigo-700 hover:bg-indigo-100';
    $sep = '<span class="mx-1 h-5 w-px bg-slate-200"></span>';
@endphp

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

    <div
        class="mt-1"
        wire:ignore
        wire:key="tiptap-{{ $key }}"
        x-data="tiptapEditor(@js($model))"
        x-on:keydown.ctrl.b.prevent="run('toggleBold')"
        x-on:keydown.ctrl.i.prevent="run('toggleItalic')"
    >
        <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">
                {{-- Headings --}}
                <button type="button" class="{{ $btn }} font-bold" :class="state.h1 && '{{ $active }}'" @click="toggleHeading(1)" title="{{ __('Heading 1') }}">H1</button>
                <button type="button" class="{{ $btn }} font-bold" :class="state.h2 && '{{ $active }}'" @click="toggleHeading(2)" title="{{ __('Heading 2') }}">H2</button>
                <button type="button" class="{{ $btn }} font-bold" :class="state.h3 && '{{ $active }}'" @click="toggleHeading(3)" title="{{ __('Heading 3') }}">H3</button>
                {!! $sep !!}
                {{-- Inline marks --}}
                <button type="button" class="{{ $btn }}" :class="state.bold && '{{ $active }}'" @click="run('toggleBold')" title="{{ __('Bold') }}"><x-icon name="bold" class="h-4 w-4" /></button>
                <button type="button" class="{{ $btn }}" :class="state.italic && '{{ $active }}'" @click="run('toggleItalic')" title="{{ __('Italic') }}"><x-icon name="italic" class="h-4 w-4" /></button>
                <button type="button" class="{{ $btn }}" :class="state.underline && '{{ $active }}'" @click="run('toggleUnderline')" title="{{ __('Underline') }}"><x-icon name="underline" class="h-4 w-4" /></button>
                <button type="button" class="{{ $btn }}" :class="state.strike && '{{ $active }}'" @click="run('toggleStrike')" title="{{ __('Strikethrough') }}"><x-icon name="fa-solid fa-strikethrough" class="h-4 w-4" /></button>
                {!! $sep !!}
                {{-- Alignment --}}
                <button type="button" class="{{ $btn }}" :class="state.left && '{{ $active }}'" @click="setAlign('left')" title="{{ __('Align left') }}">
                    <x-icon name="align-left" class="h-4 w-4" />
                </button>
                <button type="button" class="{{ $btn }}" :class="state.center && '{{ $active }}'" @click="setAlign('center')" title="{{ __('Align center') }}">
                    <x-icon name="align-center" class="h-4 w-4" />
                </button>
                <button type="button" class="{{ $btn }}" :class="state.right && '{{ $active }}'" @click="setAlign('right')" title="{{ __('Align right') }}">
                    <x-icon name="align-right" class="h-4 w-4" />
                </button>
                {!! $sep !!}
                {{-- Lists --}}
                <button type="button" class="{{ $btn }}" :class="state.bulletList && '{{ $active }}'" @click="run('toggleBulletList')" title="{{ __('Bullet list') }}">
                    <x-icon name="list-bullet" class="h-4 w-4" />
                </button>
                <button type="button" class="{{ $btn }}" :class="state.orderedList && '{{ $active }}'" @click="run('toggleOrderedList')" title="{{ __('Numbered list') }}">
                    <x-icon name="numbered-list" class="h-4 w-4" />
                </button>
                <button type="button" class="{{ $btn }}" :class="state.link && '{{ $active }}'" @click="toggleLink()" title="{{ __('Link') }}">
                    <x-icon name="link" class="h-4 w-4" />
                </button>
                {!! $sep !!}
                {{-- Tables --}}
                <button type="button" class="{{ $btn }}" @click="insertTable()" title="{{ __('Insert table') }}">
                    <x-icon name="table-cells" class="h-4 w-4" />
                </button>
                <template x-if="state.table">
                    <span class="flex items-center gap-0.5">
                        <button type="button" class="{{ $btn }} text-xs" @click="run('addRowAfter')" title="{{ __('Add row') }}">+Row</button>
                        <button type="button" class="{{ $btn }} text-xs" @click="run('deleteRow')" title="{{ __('Delete row') }}">−Row</button>
                        <button type="button" class="{{ $btn }} text-xs" @click="run('addColumnAfter')" title="{{ __('Add column') }}">+Col</button>
                        <button type="button" class="{{ $btn }} text-xs" @click="run('deleteColumn')" title="{{ __('Delete column') }}">−Col</button>
                        <button type="button" class="{{ $btn }} text-xs" @click="run('toggleHeaderRow')" title="{{ __('Toggle header row') }}">Hdr</button>
                        <button type="button" class="{{ $btn }} text-xs text-rose-600" @click="run('deleteTable')" title="{{ __('Delete table') }}">✕Tbl</button>
                    </span>
                </template>
            </div>

            <div
                x-ref="editor"
                class="tiptap-content bg-white px-4 py-3 text-sm text-slate-800"
                style="min-height: {{ $minHeight }};"
            ></div>
        </div>
    </div>

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