@if(empty($items))
    <p class="text-muted mb-0">No leaderboards available.</p>
@else
    <div class="row">
        @foreach($items as $item)
            @php
                $activePill = null;
                foreach (($item['pills'] ?? []) as $pill) {
                    if (!empty($pill['active'])) {
                        $activePill = $pill;
                        break;
                    }
                }
                if ($activePill === null && !empty($item['pills'])) {
                    $activePill = $item['pills'][0];
                }
                $podiumUsers = $activePill['podium_users'] ?? ($item['podium_users'] ?? []);
                $detailsUrl = $activePill['url'] ?? ($item['details_url'] ?? '#');
            @endphp
            <div class="col-6">
                <article class="mlb-card">
                    <div class="mlb-card-head">
                        <h3 class="mlb-card-title">{{ $item['title'] }}</h3>
                        <div class="mlb-card-meta">
                            <p class="mlb-card-date">
                                <i class="mdi mdi-calendar"></i>
                                <span>{{ $item['interval_label'] ?: '—' }}</span>
                            </p>
                            <a class="mlb-card-details js-mlb-details" href="{{ $detailsUrl }}">View details</a>
                        </div>
                    </div>
                    <div class="mlb-podium js-mlb-podium">
                        @include('widgets.milestone_team_leaderboard_podium', ['users' => $podiumUsers])
                    </div>
                    @if(!empty($item['pills']))
                        <div class="mlb-pills">
                            @foreach($item['pills'] as $pillIndex => $pill)
                                <button type="button"
                                    class="mlb-pill {{ !empty($pill['active']) ? 'is-active' : '' }}"
                                    data-index="{{ $pillIndex }}"
                                    data-details-url="{{ $pill['url'] }}"
                                    aria-pressed="{{ !empty($pill['active']) ? 'true' : 'false' }}">{{ $pill['label'] }}</button>
                            @endforeach
                        </div>
                        <div class="mlb-podium-store">
                            @foreach($item['pills'] as $pillIndex => $pill)
                                <template class="js-mlb-podium-src" data-index="{{ $pillIndex }}">
                                    @include('widgets.milestone_team_leaderboard_podium', ['users' => $pill['podium_users'] ?? []])
                                </template>
                            @endforeach
                        </div>
                    @endif
                </article>
            </div>
        @endforeach
    </div>
@endif