@props([
    'name' => $name,
    'value' => $value,
    'placeholder' => $placeholder,
])

<div class="tiptap-wrapper"
     data-element-id="{{ $name }}-editor"
     data-input-id="{{ $name }}-input"
     data-placeholder='@json($placeholder)'
     data-content='@json($value)'
     data-prefix="{{ $name }}">
     
    {{-- Toolbar --}}
    <div class="mb-2 flex flex-wrap gap-2 items-center border border-optional rounded p-2 bg-white">
        <select id="{{ $name }}-block-type" class="border rounded p-1">
            <option value="p">Párrafo</option>
            <option value="p-no-spacing">Párrafo sin espaciado</option>
            <option value="h1">H1</option>
            <option value="h2">H2</option>
            <option value="h3">H3</option>
            <option value="h4">H4</option>
        </select>

        <select id="{{ $name }}-font-size" class="border rounded p-1">
            <option value="">Tamaño</option>
            <option>12</option>
            <option>14</option>
            <option selected>16</option>
            <option>18</option>
            <option>20</option>
            <option>24</option>
            <option>28</option>
            <option>32</option>
        </select>

        <button type="button" id="{{ $name }}-btn-bold" class="tt-btn">B</button>
        <button type="button" id="{{ $name }}-btn-italic" class="tt-btn"><em>I</em></button>
        <button type="button" id="{{ $name }}-btn-underline" class="tt-btn"><u>U</u></button>

        <div class="h-6 w-px bg-gray-300 mx-1"></div>

       <button type="button" id="{{ $name }}-align-left" class="tt-btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M3 12h12M3 18h18" />
            </svg>
        </button>
        <button type="button" id="{{ $name }}-align-center" class="tt-btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M6 12h12M3 18h18" />
            </svg>
        </button>
        <button type="button" id="{{ $name }}-align-right" class="tt-btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M9 12h12M3 18h18" />
            </svg>
        </button>
        <button type="button" id="{{ $name }}-align-justify" class="tt-btn">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h18M3 12h18M3 18h18" />
            </svg>
        </button>
        <div class="h-6 w-px bg-gray-300 mx-1"></div>
        {{-- Botones de resaltado --}}
        <button type="button" id="{{ $name }}-highlight-yellow" class="tt-btn !bg-[#f6eb14] w-5 h-5 rounded" title="Amarillo"></button>
        <button type="button" id="{{ $name }}-highlight-green" class="tt-btn !bg-green-400 w-5 h-5 rounded" title="Verde"></button>
        <button type="button" id="{{ $name }}-highlight-pink" class="tt-btn !bg-pink-400 w-5 h-5 rounded" title="Rosa"></button>
        <button type="button" id="{{ $name }}-highlight-red" class="tt-btn !bg-red-400 w-5 h-5 rounded" title="Rojo"></button>
        <button type="button" id="{{ $name }}-highlight-blue" class="tt-btn !bg-blue-400 w-5 h-5 rounded" title="Azul"></button>
        <div class="h-6 w-px bg-gray-300 mx-1"></div>
        {{-- Listados especiales --}}
        <!-- <button type="button" id="{{ $name }}-list-roman" class="tt-btn" title="Lista romana">I.</button>
        <button type="button" id="{{ $name }}-list-alpha-lower-parens" class="tt-btn" title="Lista por letra minúscula con paréntesis">a)</button>
        <button type="button" id="{{ $name }}-list-alpha-upper-dot" class="tt-btn" title="Lista por letra mayúscula con punto">A.</button> -->
        <div class="relative">
            <select id="{{ $name }}-list-dropdown" class="border rounded p-1 w-[150px] appearance-none">
                <option value="">Tipo de lista</option>
                <option value="bulletList">• Viñetas</option>
                <option value="orderedList">1. Numerada</option>
                <option value="roman">I. Romana</option>
                <option value="alphaLowerParens">a. Letra minúscula con punto</option>
                <option value="alphaUpperDot">A. Letra mayúscula con punto</option>
            </select>
            <div class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2">
                <x-icons.arrow-down />
            </div>
        </div>
    </div>

    {{-- Editor --}}
    <div id="{{ $name }}-editor" class="border border-optional rounded p-3 min-h-[220px] bg-white cursor-text"></div>
    <input type="hidden" id="{{ $name }}-input" name="{{ $name }}" value="{{ $value }}">

    {{-- Errores --}}
    @error($name)
        <p class="text-red-500 text-sm mt-2 block">{{ $message }}</p>
    @enderror
</div>