<div x-data="{
    content: @entangle('content'),
    setValue() {
        this.$refs.trix.editor.loadHTML(this.content || '');
    }
}"
     x-init="setValue()"
     class="card shadow-sm border-0">
    <div class="card-header bg-white py-3">
        <h5 class="mb-0">{{ $dsarId ? 'Edit DSAR Type' : 'Create New DSAR Type' }}</h5>
    </div>
    <div class="card-body">
        <form wire:submit.prevent="save">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-bold">Name</label>
                    <input type="text" wire:model="display_name" class="form-control @error('name') is-invalid @enderror">
                    @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold">Description</label>
                    <input type="text" wire:model="description" class="form-control @error('description') is-invalid @enderror">
                    @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>

                <div class="col-12 mt-4">
                    <div class="row">
                        <div class="col-lg-7">
                            <label class="form-label fw-bold">Content (Rich Text Editor)</label>
                            <div wire:ignore>
                                <input id="x" type="hidden" name="content">
                                <trix-editor
                                        x-ref="trix"
                                        input="x"
                                        class="trix-content form-control"
                                        @trix-change="content = $event.target.value"
                                ></trix-editor>
                            </div>
                            @error('content') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-lg-5">
                            <label class="form-label fw-bold">Live Content Preview</label>
                            <div class="bg-light border rounded p-4 overflow-auto shadow-inner" style="min-height: 400px; max-height: 450px;">
                                <div x-html="content" class="rich-text-content"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 pt-3 border-top d-flex justify-content-end gap-2">
                <button type="button" wire:click="cancel" class="btn btn-light border">Cancel</button>
                <button type="submit" class="btn btn-primary px-4">
                    <span wire:loading wire:target="save" class="spinner-border spinner-border-sm me-1"></span>
                    Save Configuration
                </button>
            </div>
        </form>
    </div>

    <style>
        trix-editor {
            min-height: 400px !important;
            max-height: 400px;
            overflow-y: auto;
        }
        /* Custom styles for the preview and editor content */
        .rich-text-content, .trix-content { font-family: initial; line-height: 1.6; }
        .rich-text-content h1, .trix-content h1 { font-size: 1.75rem; font-weight: bold; margin-bottom: 1rem; }
        .rich-text-content h2, .trix-content h2 { font-size: 1.4rem; font-weight: bold; margin-bottom: 0.8rem; }
        .rich-text-content ul, .trix-content ul { padding-left: 1.5rem; }
    </style>
</div>