{# ===== SÜPER LİG PUAN DURUMU & FİKSTÜR ===== #}
<div x-data="superLig()">
    <div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
        <div class="bg-green-600 text-white px-4 py-2.5 flex items-center gap-2">
            <i class="fas fa-chart-bar text-sm"></i>
            <h3 class="font-bold text-sm">Puan Durumu</h3>
        </div>
        <div class="p-3">
            <template x-if="standings.length > 0">
                <table class="w-full text-xs">
                    <thead>
                        <tr class="text-gray-500 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800">
                            <th class="text-left py-1.5 w-6">#</th>
                            <th class="text-left py-1.5">Takim</th>
                            <th class="text-center py-1.5 w-8">O</th>
                            <th class="text-center py-1.5 w-8 font-bold">P</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(team, index) in standings.slice(0, 10)" :key="index">
                            <tr class="border-b border-gray-50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
                                :class="index < 3 ? 'bg-green-50/50 dark:bg-green-900/10' : ''">
                                <td class="py-2 text-gray-500 font-medium" x-text="index + 1"></td>
                                <td class="py-2">
                                    <div class="flex items-center gap-1.5">
                                        <img :src="team.logo" :alt="team.name" style="width:16px;height:16px;object-fit:contain;" onerror="this.style.display='none'">
                                        <span class="font-medium text-gray-900 dark:text-gray-100 truncate" x-text="team.name"></span>
                                    </div>
                                </td>
                                <td class="py-2 text-center text-gray-500" x-text="team.played"></td>
                                <td class="py-2 text-center font-bold text-gray-900 dark:text-gray-100" x-text="team.points"></td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template>
            <template x-if="standings.length === 0 && !loading">
                <p class="text-xs text-gray-500 text-center py-6">Puan durumu yuklenemedi.</p>
            </template>
            <template x-if="loading">
                <div class="flex justify-center py-6">
                    <i class="fas fa-spinner fa-spin text-green-600 text-lg"></i>
                </div>
            </template>
        </div>
    </div>

    {# Fikstur #}
    <div class="mt-4 bg-white dark:bg-gray-900 rounded-xl border border-gray-100 dark:border-gray-800 shadow-sm overflow-hidden">
        <div class="bg-green-600 text-white px-4 py-2.5 flex items-center gap-2">
            <i class="fas fa-calendar-alt text-sm"></i>
            <h3 class="font-bold text-sm">Fikstur</h3>
        </div>
        <div class="p-3 max-h-[400px] overflow-y-auto">
            <template x-if="fixtures.length > 0">
                <div>
                    <template x-for="(group, groupIndex) in fixtureGroups" :key="groupIndex">
                        <div class="mb-3">
                            <p class="text-[10px] font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-1.5 pb-1 border-b border-gray-100 dark:border-gray-800" x-text="group.date"></p>
                            <template x-for="(match, matchIndex) in group.matches" :key="matchIndex">
                                <div class="flex items-center justify-between py-1.5 text-xs hover:bg-gray-50 dark:hover:bg-gray-800/30 rounded px-1.5 transition-colors">
                                    <span class="flex-1 text-gray-800 dark:text-gray-200 text-right pr-1.5 truncate" x-text="match.home"></span>
                                    <span class="flex-shrink-0 px-2 py-0.5 rounded text-[10px] font-bold min-w-[2.5rem] text-center"
                                          :class="match.status === 'FT' ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400' : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400'"
                                          x-text="match.score || match.time"></span>
                                    <span class="flex-1 text-gray-800 dark:text-gray-200 pl-1.5 truncate" x-text="match.away"></span>
                                </div>
                            </template>
                        </div>
                    </template>
                </div>
            </template>
            <template x-if="fixtures.length === 0 && !loading">
                <p class="text-xs text-gray-500 text-center py-6">Fikstur yuklenemedi.</p>
            </template>
            <template x-if="loading">
                <div class="flex justify-center py-6">
                    <i class="fas fa-spinner fa-spin text-green-600 text-lg"></i>
                </div>
            </template>
        </div>
    </div>
</div>
