@php
    $breakdown = $breakdown ?? ['total' => 0, 'items' => []];
@endphp
<div class="card h-100">
    <div class="card-header pb-0">
        <h4 class="card-title mb-0">{{ $title }}</h4>
        <p class="text-muted mb-0 small">{{ __('Total') }}: <strong>{{ $breakdown['total'] ?? 0 }}</strong></p>
    </div>
    <div class="card-content">
        <div class="card-body pt-1">
            @forelse($breakdown['items'] ?? [] as $item)
                <div class="mb-1">
                    <div class="d-flex justify-content-between align-items-center mb-25">
                        @if(!empty($item['url']))
                            <a href="{{ $item['url'] }}" class="font-weight-bold text-body">{{ $item['label'] }}</a>
                        @else
                            <span class="font-weight-bold">{{ $item['label'] }}</span>
                        @endif
                        <span class="text-muted small">{{ $item['count'] }} ({{ $item['percent'] }}%)</span>
                    </div>
                    <div class="progress progress-bar-{{ $item['color'] }}" style="height: 8px;">
                        <div class="progress-bar bg-{{ $item['color'] }}"
                             role="progressbar"
                             style="width: {{ max($item['percent'], $item['count'] > 0 ? 4 : 0) }}%"
                             aria-valuenow="{{ $item['percent'] }}"
                             aria-valuemin="0"
                             aria-valuemax="100"></div>
                    </div>
                </div>
            @empty
                <p class="text-muted text-center mb-0">{{ __('No data available') }}</p>
            @endforelse
        </div>
    </div>
</div>