{{-- One counter card: $icon (keenicons name), $color (bootstrap theme color), $value, $label, optional $sub, $subColor and $href. --}}
<div class="card card-flush h-100 {{ ! empty($href) ? 'hoverable' : '' }}">
    <div class="card-body d-flex align-items-center gap-4 py-6">
        <div class="symbol symbol-55px flex-shrink-0">
            <span class="symbol-label bg-light-{{ $color }}">
                <i class="ki-duotone ki-{{ $icon }} fs-2x text-{{ $color }}"><span class="path1"></span><span class="path2"></span></i>
            </span>
        </div>
        <div class="d-flex flex-column min-w-0">
            <span class="fs-2hx fw-bold text-gray-900 lh-1 mb-2">{{ $value }}</span>
            <span class="fs-6 fw-semibold text-gray-600">
                @if (! empty($href))
                    <a href="{{ $href }}" class="text-gray-600 text-hover-{{ $color }} stretched-link">{{ $label }}</a>
                @else
                    {{ $label }}
                @endif
            </span>
            @if (! empty($sub))
                <span class="fs-7 fw-semibold mt-1 text-{{ $subColor ?? 'muted' }}">{{ $sub }}</span>
            @endif
        </div>
    </div>
</div>