@php
    $score = (int) ($securityDashboard['score'] ?? 0);
    $label = (string) ($securityDashboard['label'] ?? 'needs attention');
    $tone = (string) ($securityDashboard['tone'] ?? 'danger');
    $factors = $securityDashboard['factors'] ?? [];
@endphp

<div id="overview" class="card mb-2">
    <div class="card-header border-bottom d-flex flex-wrap justify-content-between align-items-start gap-1">
        <div>
            <h4 class="card-title mb-25">Security overview</h4>
            <p class="card-text mb-0 text-muted">Your personal security posture across authentication, devices, and recovery.</p>
        </div>
        <span class="badge rounded-pill badge-light-{{ $tone }} text-capitalize">{{ $label }}</span>
    </div>
    <div class="card-body mt-1">
        <div class="row align-items-center">
            <div class="col-md-4 mb-2 mb-md-0">
                <div class="text-center">
                    <h1 class="display-3 fw-bolder text-{{ $tone }} mb-0">{{ $score }}</h1>
                    <p class="text-muted mb-1">out of 100</p>
                    <div class="progress progress-bar-{{ $tone }}" style="height: 10px;">
                        <div class="progress-bar bg-{{ $tone }}"
                             role="progressbar"
                             style="width: {{ max(0, min(100, $score)) }}%"
                             aria-valuenow="{{ $score }}"
                             aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <ul class="list-group list-group-flush">
                    @forelse($factors as $factor)
                        <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                            <div class="d-flex align-items-center">
                                <i data-feather="{{ !empty($factor['met']) ? 'check-circle' : 'circle' }}"
                                   class="me-1 text-{{ !empty($factor['met']) ? 'success' : 'muted' }}"></i>
                                <span>{{ $factor['label'] ?? '' }}</span>
                            </div>
                            <span class="badge badge-light-{{ !empty($factor['met']) ? 'success' : 'secondary' }}">
                                {{ (int) ($factor['earned'] ?? 0) }}/{{ (int) ($factor['weight'] ?? 0) }}
                            </span>
                        </li>
                    @empty
                        <li class="list-group-item px-0 text-muted">No security factors available.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>