@props(['statement', 'progress', 'backUrl', 'saveStatus' => ''])
{{-- Slim workspace header: identity, progress, save state, exit. Nothing else. --}}
<div class="witness-context-header bg-body border-bottom py-2 mb-3">
    <div class="d-flex align-items-center gap-3 flex-wrap">
        <a href="{{ $backUrl }}" class="btn btn-sm btn-outline-secondary" title="Back to client">
            <span class="mdi mdi-arrow-left" aria-hidden="true"></span>
            <span class="visually-hidden">Back to client</span>
        </a>

        <div class="me-2">
            <div class="fw-semibold lh-1">{{ $statement->client->fullName ?? $statement->client->name }}</div>
            <div class="text-muted small">
                Witness Statement
                @if($statement->claim?->case_number)
                    <span class="mx-1">·</span>{{ $statement->claim->case_number }}
                @endif
            </div>
        </div>

        <div class="ms-auto d-flex align-items-center gap-3">
            <span class="small" aria-live="polite">
                <span wire:loading.delay wire:target="saveAnswer,saveBoolean" class="text-muted">
                    <span class="mdi mdi-loading mdi-spin" aria-hidden="true"></span> Saving…
                </span>
                <span wire:loading.remove wire:target="saveAnswer,saveBoolean">
                    @if($saveStatus === 'saved')
                        <span class="text-success"><span class="mdi mdi-check" aria-hidden="true"></span> Saved</span>
                    @elseif($saveStatus === 'failed')
                        <button type="button" class="btn btn-sm btn-link text-danger p-0" wire:click="retrySave">
                            <span class="mdi mdi-alert-circle-outline" aria-hidden="true"></span> Save failed — retry
                        </button>
                    @endif
                </span>
            </span>

            <div style="min-width: 150px;">
                <div class="d-flex justify-content-between small text-muted">
                    <span>Overall</span><span>{{ $progress->overallPercent() }}%</span>
                </div>
                <div class="progress" style="height:6px;" role="progressbar"
                     aria-valuenow="{{ $progress->overallPercent() }}" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar" style="width: {{ $progress->overallPercent() }}%"></div>
                </div>
            </div>
        </div>
    </div>
</div>