<div class="card shadow-sm h-100 border-0">
    <div class="card-body">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h5 class="text-muted fw-bold mb-0">Case Progression</h5>
        </div>

        <div class="mt-3">
            @foreach($labels as $key => $label)
                <div class="mb-2 p-2 rounded-3 d-flex justify-content-between align-items-center {{ $progress[$key] ? 'bg-soft-light' : 'bg-soft-danger border border-danger-subtle border-dashed' }}">
                    <label class="small fw-bold mb-0 {{ $progress[$key] ? 'text-dark' : 'text-danger' }}" for="progress-{{ $key }}">
                        {{ $label }}
                    </label>

                    <div class="form-check form-switch mb-0">
                        <input
                                type="checkbox"
                                class="form-check-input"
                                role="switch"
                                id="progress-{{ $key }}"
                                wire:model.live="progress.{{ $key }}"
                        >
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
