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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/2.1.0/trix.min.css">

<div {{ $attributes->merge(['class' => 'space-y-2']) }}>
    <input id="{{ $name }}" type="hidden" name="{{ $name }}" value="{{ old($name, $value) }}">
    <trix-editor input="{{ $name }}" class="trix-content bg-white border border-gray-300 rounded-md min-h-[300px]"></trix-editor>
    <x-input-error :messages="$errors->get($name)" class="mt-1" />
</div>

@once
    @push('scripts')
        <script src="https://cdnjs.cloudflare.com/ajax/libs/trix/2.1.0/trix.min.js"></script>
    @endpush
@endonce