@props([
    'model',
    'value' => '',
    'placeholder' => '',
    'minHeight' => '140px',
    'mentionsModel' => null,
])

@php
    $targetMentionsModel = $mentionsModel ?? $attributes->get('mentions-model') ?? $attributes->get('mentions_model');
    if (is_null($targetMentionsModel) && in_array($model, ['comment', 'newComment'], true)) {
        $targetMentionsModel = 'mentions';
    }
@endphp

<div
    wire:key="rich-text-{{ $model }}"
    x-data="richTextEditor({
        model: @js($model),
        initialValue: @js($value),
        placeholder: @js($placeholder),
        mentionsModel: @js($targetMentionsModel),
    })"
    class="rich-text-editor"
>
    <input type="hidden" wire:model.defer="{{ $model }}" x-ref="livewireInput">
    <div wire:ignore>
        <div x-ref="editor" style="min-height: {{ $minHeight }}"></div>
    </div>
    <div x-show="showSuggestions" x-cloak @click.away="showSuggestions = false"
         :style="dropdownStyle"
         class="absolute z-50 max-h-52 w-64 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-xl dark:border-gray-600 dark:bg-gray-800">
        <template x-for="user in suggestions" :key="user.id">
            <button type="button"
                    @mousedown.prevent.stop
                    @click.prevent.stop="selectMention(user)"
                    class="block w-full px-3 py-2 text-start text-sm text-gray-800 hover:bg-blue-50 dark:text-gray-100 dark:hover:bg-gray-700"
                    x-text="localizedName(user.name_localized || user.name)"></button>
        </template>
    </div>
</div>