{{-- Question Card --}}
<div class="card shadow-sm border-0 border-radius-xl mb-4 overflow-hidden">
    <div class="card-header bg-gray-50 py-3 border-bottom">
        <div class="d-flex align-items-center">
            <div class="bg-white border-radius-md p-2 me-3 shadow-none border">
                <i class="fas fa-file-alt text-secondary fs-6"></i>
            </div>
            <div>
                <h6 class="text-dark mb-0 font-weight-bolder text-xs text-uppercase tracking-wider">
                    Essay Questions
                </h6>
                <p class="text-secondary text-xxs mb-0">Click on the list of participants next to move through the answers.</p>
            </div>
        </div>
    </div>
    <div class="card-body p-4 bg-white">
        <div class="p-3 border-radius-lg border-start border-4 border-primary bg-gray-50">
            <h6 class="font-weight-bold text-dark mb-0 line-height-base" style="font-size: 0.95rem;">
                {{ $question->text }}
            </h6>
        </div>
        <div class="mt-3 d-flex align-items-center">
            <span class="text-xs font-weight-bold text-secondary me-3">
                <i class="fas fa-award text-warning me-1"></i> Max Score:
                <span class="text-dark">{{ $question->weight }}</span>
            </span>
            <span class="text-xs font-weight-bold text-secondary">
                <i class="fas fa-tasks text-info me-1"></i> Tipe: <span class="text-dark">Essay</span>
            </span>
        </div>
    </div>
</div>