@props(['status' => ''])

{{-- Unobtrusive autosave indicator. "Saving…" shows via wire:loading on the
     save actions; "Saved"/"Save failed" reflect the last result. Uses aria-live
     polite so screen readers hear it without noise. --}}
<div {{ $attributes->merge(['class' => 'witness-save-status small text-muted d-inline-flex align-items-center gap-1']) }}
     aria-live="polite">
    <span wire:loading wire:target="saveAnswer, saveBoolean, addRepeaterRow, removeRepeaterRow">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width:.8rem;height:.8rem;"></span>
        Saving…
    </span>
    <span wire:loading.remove wire:target="saveAnswer, saveBoolean, addRepeaterRow, removeRepeaterRow">
        @if($status === 'saved')
            <span class="text-success"><span class="mdi mdi-check-circle-outline" aria-hidden="true"></span> Saved</span>
        @elseif($status === 'failed')
            <span class="text-danger"><span class="mdi mdi-alert-circle-outline" aria-hidden="true"></span> Save failed — retry</span>
        @endif
    </span>
</div>