@props([
    'model' => 'body',
    'label' => 'Details',
    'placeholder' => 'Describe the ticket, include steps to reproduce, expected result, actual result and any useful technical details.',
    'rows' => 10,
])

<div class="space-y-2">
    <label for="{{ $model }}-editor" class="block text-sm font-semibold text-zinc-200">
        {{ $label }}
    </label>

    <div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-950 shadow-sm">
        <div class="flex flex-wrap items-center gap-2 border-b border-zinc-700 bg-zinc-900/80 px-4 py-2 text-sm text-zinc-300">
            <span class="rounded-lg bg-zinc-800 px-2 py-1 font-semibold text-zinc-100">Spellcheck enabled</span>
            <span class="text-zinc-500">Use Markdown for formatting, lists, quotes, code and links.</span>
        </div>

        <textarea
            id="{{ $model }}-editor"
            wire:model.defer="{{ $model }}"
            rows="{{ $rows }}"
            placeholder="{{ $placeholder }}"
            spellcheck="true"
            autocorrect="on"
            autocomplete="off"
            autocapitalize="sentences"
            inputmode="text"
            class="block min-h-[14rem] w-full resize-y border-0 bg-zinc-950 px-5 py-4 text-base leading-7 text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
        ></textarea>
    </div>

    <p class="text-xs font-semibold text-zinc-400">
        Browser spellcheck is handled by the native editor and remains active after punctuation such as commas.
    </p>
</div>