{{-- Sidebar: Scrollable Participant List --}}
<div class="col-lg-3 col-md-4 mb-4">
    <div class="card shadow-sm border-0 border-radius-xl h-100">
        <div class="card-header pb-0 p-3 bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0 font-weight-bolder">List Participants</h6>
                <span class="badge bg-soft-info text-info rounded-pill text-xxs font-weight-bolder">
                    {{ count($participants) }} All
                </span>
            </div>
            <div class="nav-wrapper position-relative end-0 mb-3">
                <ul class="nav nav-pills nav-fill p-1 bg-gray-100 border-radius-lg" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link mb-0 px-0 py-1 active text-xs font-weight-bold"
                           data-bs-toggle="tab" href="#all" role="tab">List Participants</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card-body p-2 overflow-auto" style="max-height: 700px;">
            <div class="px-2">
                @foreach ($participants as $p)
                    <a href="{{ url($url_menu . '/show/' . rawurlencode($idencrypt)) }}?exam_id={{ $exam_id }}&p={{ rawurlencode(encrypt($p->id)) }}"
                        class="d-block border-0 mb-2 p-3 border-radius-lg transition-all participant-card
                            {{ $active_participant->id == $p->id ? 'active-participant shadow-md bg-white' : 'bg-transparent' }}">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-sm rounded-circle me-3
                                {{ $active_participant->id == $p->id ? 'bg-gradient-primary shadow-sm' : 'bg-gray-200 text-secondary' }}">
                                <span class="text-xs font-weight-bold">{{ strtoupper(substr($p->name, 0, 1)) }}</span>
                            </div>
                            <div class="flex-grow-1 overflow-hidden">
                                <h6 class="mb-0 text-sm font-weight-bold
                                    {{ $active_participant->id == $p->id ? 'text-dark' : 'text-dark opacity-8' }}">
                                    {{ $p->name }}
                                </h6>
                                <p class="text-xxs mb-0 text-secondary font-weight-bold opacity-7">{{ $p->trn }}</p>
                            </div>
                            <div class="state-indicator ps-2">
                                @if ($p->score !== null)
                                    <div class="d-flex flex-column align-items-end">
                                        <span class="text-xxs font-weight-bolder text-success mb-1">SCORE</span>
                                        <span class="badge rounded-pill bg-soft-success text-success font-weight-bolder px-2 py-1"
                                            style="font-size: 10px;">{{ $p->score }}</span>
                                    </div>
                                @else
                                    <span class="badge badge-dot ms-2">
                                        <i class="bg-warning"></i>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>