<div class="container py-4">

    <!-- Flash Messages -->
    @if (session()->has('message'))
        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2"></i> {{ session('message') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold text-primary mb-0">DSAR Type Management</h2>
            <p class="text-muted small">Configure templates for privacy requests</p>
        </div>
        @if($view === 'list')
            <button wire:click="create" class="btn btn-primary shadow-sm">
                <i class="bi bi-plus-lg me-1"></i> New Type
            </button>
        @endif
    </div>

    @if($view === 'list')
        <!-- List View Container -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-search"></i></span>
                    <input wire:model.live="search" type="text" class="form-control border-start-0" placeholder="Search types...">
                </div>
            </div>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0 align-middle">
                        <thead class="table-light">
                        <tr>
                            <th class="ps-4">Type Name</th>
                            <th>Description</th>
                            <th>Last Updated</th>
                            <th class="text-end pe-4">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($dsarTypes as $type)
                            <tr>
                                <td class="ps-4">
                                    <span class="fw-bold">{{ $type->display_name }}</span>
                                </td>
                                <td class="text-muted">{{ Str::limit($type->description, 50) }}</td>
                                <td>{{ $type->updated_at->format('M d, Y') }}</td>
                                <td class="text-end pe-4">
                                    <button wire:click="edit({{ $type->id }})" class="btn btn-md">
                                        <i class="mdi mdi-pencil"></i>
                                    </button>
                                    <button
                                            onclick="confirm('Are you sure?') || event.stopImmediatePropagation()"
                                            wire:click="delete({{ $type->id }})"
                                            class="btn btn-md"
                                    >
                                        <i class="mdi mdi-trash-can text-danger"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-5 text-muted">No request types found.</td>
                            </tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @else
        <!-- Child Component Integration -->
        <livewire:dsar.type-editor
                :dsar-id="$dsarId"
                wire:key="dsar-editor-{{ $dsarId ?? 'new' }}"
        />
    @endif

    @push('styles')
        <link rel="stylesheet" href="https://unpkg.com/trix@2.0.8/dist/trix.css">
        <style>
            /* Trix Custom Styling to match your UI */
            trix-editor {
                min-height: 400px !important;
                background: white;
                border-color: #dee2e6 !important;
            }
            trix-toolbar .trix-button-group {
                border-color: #dee2e6 !important;
            }
        </style>
    @endpush

    @push('scripts')
        <script src="https://unpkg.com/trix@2.0.8/dist/trix.umd.min.js"></script>
    @endpush
</div>