@props(['label' => false, 'name'])

<div class="form-control w-full flex flex-col pb-4">
    @if ($label)
        <label for="{{ $name }}" class="text-sm py-2">{{ $label }}</label>
    @endif
    <textarea name="{{ $name }}" id="{{ $name }}" x-data
        x-init="
    CKEDITOR.replace('{{ $name }}', { customConfig: '{{ asset('js/ckeditor_config.js') }}', filebrowserUploadUrl: '{{ route('ckeditor.image-upload', ['_token' => csrf_token()]) }}', filebrowserUploadMethod: 'form' }); CKEDITOR.instances.{{ $name }}.on('change', function() { $dispatch('input', this.getData()); });"
        wire:key="ckeditor-{{ time() }}"
        {{ $attributes->except('x-data')->merge(['class' => 'w-full appearance-none border-0 bg-transparent text-black py-1 px-0 focus:outline-none focus:border-transparent']) }}></textarea>
</div>