{{-- Renders nothing at all when the user cannot view this case type. --}}
<div>
    @if($this->canView())
    <div class="card shadow-sm my-3">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="fw-bold m-0">
                Joint Claimants
                @if($claimants->isNotEmpty())
                    <span class="badge bg-secondary ms-1">{{ $claimants->count() }}</span>
                @endif
            </h4>
            @if($this->canManage())
                <button class="btn btn-primary btn-sm" wire:click="showAdd">
                    <i class="mdi mdi-account-plus-outline"></i>
                </button>
            @endif
        </div>

        @if($claimants->isEmpty())
            <div class="text-center p-4 text-muted">
                <i class="mdi mdi-account-multiple-outline" style="font-size: 48px;"></i>
                <p class="mt-2 mb-0 fw-bold">No joint claimants on this case.</p>
                <p class="mb-0 small">Add a spouse, civil partner or other secondary client who is also a claimant here.</p>
            </div>
        @else
            <div class="list-group">
                @foreach($claimants as $claimant)
                    <div class="list-group-item bg-light mb-2 rounded border-0 d-flex justify-content-between align-items-start"
                         wire:key="joint-claimant-{{ $claimant->id }}">
                        <div class="flex-grow-1">
                            <p class="mb-1 fw-semibold">
                                @if($claimant->client)
                                    <a href="{{ route('clients.show', $claimant->client) }}" class="text-decoration-none">
                                        {{ $claimant->client->name_first }} {{ $claimant->client->name_last }}
                                    </a>
                                @else
                                    <span class="text-muted">Client removed</span>
                                @endif

                                @if($claimant->relationship)
                                    <span class="badge bg-white text-primary border ms-1" style="font-size: 0.75em;">
                                        {{ $claimant->relationship }}
                                    </span>
                                @endif
                                @if($claimant->is_primary_contact)
                                    <span class="badge bg-primary ms-1" style="font-size: 0.75em;">Primary contact</span>
                                @endif
                                @if($claimant->client?->is_vulnerable)
                                    <span class="badge bg-danger ms-1" style="font-size: 0.75em;">Vulnerable</span>
                                @endif
                            </p>

                            <div class="text-muted small">
                                @if($claimant->client?->email_address)
                                    <span class="me-2"><i class="mdi mdi-email-outline me-1"></i>{{ $claimant->client->email_address }}</span>
                                @endif
                                @if($claimant->client?->phone_number)
                                    <span class="me-2"><i class="mdi mdi-phone-outline me-1"></i>{{ $claimant->client->phone_number }}</span>
                                @endif
                                @if($claimant->client?->date_of_birth)
                                    <span><i class="mdi mdi-calendar me-1"></i>{{ $claimant->client->date_of_birth->format('d/m/Y') }}</span>
                                @endif
                            </div>

                            @if($claimant->linkedCase)
                                <div class="small mt-1">
                                    <i class="mdi mdi-link-variant text-muted me-1"></i>
                                    Their own case:
                                    @if($claimant->linkedCase->getJointClaimantRoute())
                                        <a href="{{ $claimant->linkedCase->getJointClaimantRoute() }}">{{ $claimant->linkedCase->getJointClaimantLabel() }}</a>
                                    @else
                                        {{ $claimant->linkedCase->getJointClaimantLabel() }}
                                    @endif
                                </div>
                            @endif

                            @if($claimant->notes)
                                <small class="text-muted d-block mt-1 fst-italic">
                                    <i class="mdi mdi-information-outline me-1"></i>{{ $claimant->notes }}
                                </small>
                            @endif

                            <small class="text-muted d-block mt-1 extra-small">
                                Added {{ $claimant->created_at?->format('d/m/Y') }}
                                @if($claimant->addedBy)
                                    by {{ $claimant->addedBy->name_first }} {{ $claimant->addedBy->name_last }}
                                @endif
                            </small>
                        </div>

                        @if($this->canManage())
                            <div class="d-flex gap-2 ms-3">
                                <button wire:click="loadEdit({{ $claimant->id }})" class="btn btn-md" title="Edit">
                                    <i class="mdi mdi-pencil"></i>
                                </button>
                                <button wire:click="remove({{ $claimant->id }})"
                                        wire:confirm="Remove this joint claimant from the case? Their own client record and cases are not affected."
                                        class="btn btn-md" title="Remove">
                                    <i class="mdi mdi-trash-can text-danger"></i>
                                </button>
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- EDITOR --}}
    @if($show)
        <div>
            <div class="offcanvas offcanvas-end show" tabindex="-1" style="--bs-offcanvas-width: 560px;" role="dialog">
                <div class="offcanvas-header border-bottom">
                    <h5 class="fw-bold mb-0">{{ $editingId ? 'Edit' : 'Add' }} Joint Claimant</h5>
                    <button type="button" class="btn-close text-reset" wire:click="hideAdd"></button>
                </div>

                <div class="offcanvas-body bg-light">
                    <form wire:submit.prevent="save">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body">

                                {{-- CLIENT PICKER --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-uppercase text-muted">Client</label>

                                    @if($selectedClient)
                                        <div class="d-flex justify-content-between align-items-center p-2 rounded bg-light border">
                                            <div>
                                                <div class="fw-semibold">{{ $selectedClient->name_first }} {{ $selectedClient->name_last }}</div>
                                                <div class="text-muted small">
                                                    {{ $selectedClient->email_address ?: '—' }}
                                                    @if($selectedClient->date_of_birth)
                                                        · {{ $selectedClient->date_of_birth->format('d/m/Y') }}
                                                    @endif
                                                </div>
                                            </div>
                                            @unless($editingId)
                                                <button type="button" class="btn btn-sm btn-outline-secondary" wire:click="clearClient">
                                                    Change
                                                </button>
                                            @endunless
                                        </div>
                                    @else
                                        <input type="text"
                                               class="form-control @error('client_id') is-invalid @enderror"
                                               wire:model.live.debounce.300ms="search"
                                               placeholder="Search existing clients by name, email or phone…">

                                        @if(strlen(trim($search)) >= 2)
                                            <div class="list-group mt-2">
                                                @forelse($this->searchResults as $result)
                                                    <button type="button"
                                                            class="list-group-item list-group-item-action"
                                                            wire:key="client-result-{{ $result->id }}"
                                                            wire:click="selectClient({{ $result->id }})">
                                                        <span class="fw-semibold">{{ $result->name_first }} {{ $result->name_last }}</span>
                                                        <span class="text-muted small d-block">
                                                            {{ $result->email_address ?: 'no email' }}
                                                            @if($result->date_of_birth)
                                                                · {{ $result->date_of_birth->format('d/m/Y') }}
                                                            @endif
                                                        </span>
                                                    </button>
                                                @empty
                                                    <div class="list-group-item text-muted small">
                                                        No matching clients. The joint claimant must exist as a client first.
                                                    </div>
                                                @endforelse
                                            </div>
                                        @endif
                                    @endif

                                    @error('client_id') <span class="text-danger small d-block mt-1">{{ $message }}</span> @enderror
                                </div>

                                {{-- RELATIONSHIP --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-bold text-uppercase text-muted">Relationship to Primary Client</label>
                                    <select wire:model="relationship" class="form-select @error('relationship') is-invalid @enderror">
                                        @foreach(\App\Models\JointClaimant::RELATIONSHIPS as $option)
                                            <option value="{{ $option }}">{{ $option }}</option>
                                        @endforeach
                                    </select>
                                    @error('relationship') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>

                                {{-- LINKED CASE --}}
                                @if($this->linkableCases->isNotEmpty())
                                    <div class="mb-3">
                                        <label class="form-label small fw-bold text-uppercase text-muted">Their Own Case</label>
                                        <select wire:model="linked_case_id" class="form-select @error('linked_case_id') is-invalid @enderror">
                                            <option value="">Not cross-referenced</option>
                                            @foreach($this->linkableCases as $case)
                                                <option value="{{ $case->getKey() }}">{{ $case->getJointClaimantLabel() }}</option>
                                            @endforeach
                                        </select>
                                        <div class="form-text">
                                            Optional. Cross-reference the case this client holds in their own right.
                                        </div>
                                        @error('linked_case_id') <span class="text-danger small">{{ $message }}</span> @enderror
                                    </div>
                                @endif

                                {{-- PRIMARY CONTACT --}}
                                <div class="form-check mb-3">
                                    <input class="form-check-input" type="checkbox" id="jc-primary-contact"
                                           wire:model="is_primary_contact">
                                    <label class="form-check-label" for="jc-primary-contact">
                                        Primary contact for this case
                                    </label>
                                </div>

                                {{-- NOTES --}}
                                <div class="mb-0">
                                    <label class="form-label small fw-bold text-uppercase text-muted">Notes</label>
                                    <textarea wire:model="notes" class="form-control @error('notes') is-invalid @enderror"
                                              rows="3" placeholder="Optional notes…"></textarea>
                                    @error('notes') <span class="text-danger small">{{ $message }}</span> @enderror
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-success btn-lg shadow">
                                <i class="mdi mdi-check-circle me-2"></i>
                                {{ $editingId ? 'Update Joint Claimant' : 'Add Joint Claimant' }}
                            </button>
                            <button type="button" class="btn btn-link text-muted" wire:click="hideAdd">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="offcanvas-backdrop fade show" wire:click="hideAdd"></div>
        </div>
    @endif
    </div>
    @endif
</div>