{{-- Stats Cards --}}
<div class="row mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">{{ __('labels.total_experts') }}</h6>
                    <h3 class="mb-0">{{ $total ?? 0 }}</h3>
                </div>
                <div class="bg-primary-opacity-10 p-3 rounded">
                    <i class="fas fa-user-tie text-primary fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">{{ __('labels.verified') }}</h6>
                    <h3 class="mb-0 text-success">{{ $active ?? 0 }}</h3>
                </div>
                <div class="bg-success bg-opacity-10 p-3 rounded">
                    <i class="fas fa-check-circle text-success fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">{{ __('labels.pending') }}</h6>
                    <h3 class="mb-0 text-warning">{{ $pending ?? 0 }}</h3>
                </div>
                <div class="bg-warning bg-opacity-10 p-3 rounded">
                    <i class="fas fa-clock text-warning fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="text-muted mb-2">{{ __('labels.total_answers') }}</h6>
                    <h3 class="mb-0">{{ $total_answers ?? 0 }}</h3>
                </div>
                <div class="bg-info bg-opacity-10 p-3 rounded">
                    <i class="fas fa-reply-all text-info fa-2x"></i>
                </div>
            </div>
        </div>
    </div>
</div>