@php
    use App\Services\Translator;

    $fx = $match['fixture'] ?? [];
    $teams = $match['teams'] ?? [];
    $goals = $match['goals'] ?? [];
    $leagueInfo = $match['league'] ?? [];
    $statusData = $fx['status'] ?? [];

    $statusShort = $statusData['short'] ?? 'NS';
    $elapsed = $statusData['elapsed'] ?? null;
    $isLive = in_array($statusShort, ['1H','2H','HT','ET','BT','P','LIVE','INT']);
    $isFinished = in_array($statusShort, ['FT','AET','PEN']);

    $home = $teams['home'] ?? [];
    $away = $teams['away'] ?? [];
    $homeName = Translator::team($home['name'] ?? '');
    $awayName = Translator::team($away['name'] ?? '');
    $round = $leagueInfo['round'] ?? '';
    $leagueName = Translator::league($leagueInfo['name'] ?? '', $leagueInfo['country'] ?? null);

    $matchDate = null;
    try {
        if (!empty($fx['date'])) $matchDate = \Carbon\Carbon::parse($fx['date']);
    } catch (\Exception $e) {}
    $dateStr = $matchDate ? $matchDate->format('Y-m-d') : '';
    $timeStr = $matchDate ? $matchDate->setTimezone('Africa/Tunis')->format('H:i') : '';
@endphp

<a href="{{ isset($fx['id']) ? route('match.show', $fx['id']) : '#' }}" class="block mb-2 rounded-[12px] bg-white border {{ $isLive ? 'border-[#E53E3E]' : 'border-[#EEEEEE]' }}" style="border-width: {{ $isLive ? '1.5px' : '1px' }};">
    {{-- Header: league name + round + date (team mode) --}}
    <div class="flex items-center px-3 py-1.5 bg-primary/10 rounded-t-[12px]">
        <span class="flex-1 truncate font-semibold text-primary" style="font-size: 9.9px;">{{ $leagueName }} • {{ $formatRound($round) }}</span>
        @if($dateStr)
            <span class="text-gray-600" style="font-size: 9px;">{{ $dateStr }}</span>
        @endif
    </div>

    {{-- Match row --}}
    <div class="flex items-center px-2.5 py-2.5">
        <div class="flex-1 flex items-center gap-1.5 justify-end min-w-0">
            <span class="text-end line-clamp-2 font-semibold text-black/70" style="font-size: 9.9px; line-height: 1.2;">{{ $homeName }}</span>
            <div class="w-[30px] h-[30px] flex items-center justify-center flex-shrink-0">
                @if(!empty($home['logo']))
                    <img src="{{ $home['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#9CA3AF"><path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/></svg>
                @endif
            </div>
        </div>

        <div class="flex items-center justify-center flex-shrink-0 text-center" style="width: {{ $isLive ? '110px' : '70px' }};">
            @if($isLive)
                <div class="flex items-center justify-center gap-1">
                    <span class="font-bold text-[#E53935]" style="font-size: 15px;">{{ $goals['home'] ?? 0 }}</span>
                    <div class="relative w-9 h-9 flex items-center justify-center">
                        @php
                            $elapsed = min(90, max(0, $elapsed ?? 0));
                            $circumference = 2 * M_PI * 15;
                            $remaining = $circumference - ($elapsed / 90) * $circumference;
                        @endphp
                        <svg class="absolute inset-0 -rotate-90" width="36" height="36" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="15" fill="none" stroke="#E8E8E8" stroke-width="3" stroke-linecap="round"/>
                            <circle cx="18" cy="18" r="15" fill="none" stroke="#38A169" stroke-width="3" stroke-linecap="round" stroke-dasharray="{{ $circumference }}" stroke-dashoffset="{{ $remaining }}"/>
                        </svg>
                        <span class="relative font-bold text-[#38A169]" style="font-size: 9px;">{{ $elapsed }}'</span>
                    </div>
                    <span class="font-bold text-[#E53935]" style="font-size: 15px;">{{ $goals['away'] ?? 0 }}</span>
                </div>
            @elseif($isFinished)
                <div class="flex flex-col items-center">
                    <div class="bg-[#38A169] text-white font-bold rounded" style="padding: 1px 6px; font-size: 8px;">{{ __('messages.finished') }}</div>
                    <div class="font-bold text-primary mt-0.5" style="font-size: 13px;">{{ $goals['home'] ?? 0 }} - {{ $goals['away'] ?? 0 }}</div>
                </div>
            @else
                <div class="flex flex-col items-center">
                    <div class="text-primary font-semibold" style="font-size: 8px;">{{ $matchDate ? $matchDate->translatedFormat('d M') : '' }}</div>
                    <div class="text-black/70 font-bold" style="font-size: 12px;">{{ $timeStr }}</div>
                </div>
            @endif
        </div>

        <div class="flex-1 flex items-center gap-1.5 min-w-0">
            <div class="w-[30px] h-[30px] flex items-center justify-center flex-shrink-0">
                @if(!empty($away['logo']))
                    <img src="{{ $away['logo'] }}" alt="" class="w-full h-full object-contain" loading="lazy">
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#9CA3AF"><path d="M12 2L4 5v6c0 5.5 3.8 10.7 8 12 4.2-1.3 8-6.5 8-12V5l-8-3z"/></svg>
                @endif
            </div>
            <span class="line-clamp-2 font-semibold text-black/70" style="font-size: 9.9px; line-height: 1.2;">{{ $awayName }}</span>
        </div>
    </div>
</a>