<div class="accordion-item mb-3 border shadow-sm">
    <h2 class="accordion-header">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ $dsar->id }}">
            <div class="d-flex justify-content-between w-100 align-items-center pe-3">
                <div>
                    <h3><strong>{{ $dsar->institution->display_name }}</strong></h3>
                    <span class="ms-2 badge {{ $dsar->status === 'approved' ? 'bg-success' : 'bg-warning text-dark' }}">
                        {{ ucfirst($dsar->status) }}
                    </span>
                </div>
            </div>
        </button>
    </h2>

    <div id="collapse-{{ $dsar->id }}" class="accordion-collapse collapse" wire:ignore.self>
        <div class="accordion-body bg-white">
            <div class="mb-3" wire:ignore x-data="{ content: @entangle('dsar.body') }" x-on:trix-change="content = $event.target.value">
                <label class="form-label fw-bold">Request Content</label>
                <input id="trix-{{ $dsar->id }}" type="hidden" :value="content">
                <trix-editor
                        wire:model.live.debounce.500ms="content"
                        input="trix-{{ $dsar->id }}"
                        class="trix-content border rounded p-3 bg-white"
                        style="min-height: 250px;"
                        placeholder="Refine your DSAR request here..."
                >{!! $dsar->content !!}</trix-editor>
            </div>

            <div class="d-flex justify-content-end mb-3">
                <button wire:click="toggleApprove" class="btn {{ $dsar->status === 'approved' ? 'btn-success' : 'btn-outline-success' }}">
                    {{ $dsar->status === 'approved' ? '✓ Approved' : 'Approve' }}
                </button>
            </div>
        </div>
    </div>
</div>