@props([
    'section',
    'sectionProgress' => null,
])

<section class="witness-section card border-0 shadow-sm mb-3" wire:key="section-{{ $section->key }}"
         aria-labelledby="section-title-{{ $section->key }}">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start gap-2 mb-1">
            <div>
                <h5 id="section-title-{{ $section->key }}" class="card-title mb-0 d-flex align-items-center gap-2">
                    {{ $section->title }}
                    @if($section->sensitive)
                        <span class="badge bg-danger-subtle text-danger-emphasis" title="Sensitive — record only as far as the client is comfortable">
                            <span class="mdi mdi-heart-outline" aria-hidden="true"></span> Sensitive
                        </span>
                    @endif
                </h5>
                <span class="text-muted small text-uppercase">{{ $section->group }}</span>
            </div>
            @if($sectionProgress)
                <span class="badge rounded-pill {{ $sectionProgress['percent'] === 100 ? 'bg-success' : 'bg-light text-dark border' }}">
                    {{ $sectionProgress['answered'] }}/{{ $sectionProgress['total'] }}
                </span>
            @endif
        </div>

        {{ $slot }}
    </div>
</section>