<!DOCTYPE html>
<html lang="tr" class="scroll-smooth"
      x-data="{
          darkMode: localStorage.getItem('darkMode') === 'true',
          mobileMenu: false,
          searchOpen: false
      }"
      x-init="$watch('darkMode', val => { localStorage.setItem('darkMode', val); document.documentElement.classList.toggle('dark', val); })"
      :class="{ 'dark': darkMode }">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}Haber{% endblock %}</title>
    <meta name="description" content="{% block meta_description %}Son dakika haberleri, guncel gelismeler ve daha fazlasi.{% endblock %}">
    <meta name="robots" content="{% block meta_robots %}index, follow{% endblock %}">
    <link rel="canonical" href="{% block canonical %}{{ app.request.uri }}{% endblock %}">

    {# Open Graph #}
    <meta property="og:type" content="{% block og_type %}website{% endblock %}">
    <meta property="og:title" content="{% block og_title %}{{ block('title') }}{% endblock %}">
    <meta property="og:description" content="{% block og_description %}{{ block('meta_description') }}{% endblock %}">
    <meta property="og:url" content="{{ app.request.uri }}">
    {% block og_image %}{% endblock %}
    <meta property="og:locale" content="tr_TR">
    <meta property="og:site_name" content="Haber">

    {# Twitter Card #}
    <meta name="twitter:card" content="{% block twitter_card %}summary_large_image{% endblock %}">
    <meta name="twitter:title" content="{{ block('og_title') }}">
    <meta name="twitter:description" content="{{ block('og_description') }}">
    {% block twitter_image %}{% endblock %}

    {% block structured_data %}{% endblock %}

    {% block stylesheets %}
        {{ encore_entry_link_tags('frontend') }}
    {% endblock %}

    <style>
        [x-cloak] { display: none !important; }

        /* Breaking news ticker */
        @keyframes ticker-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .ticker-animate {
            animation: ticker-scroll 30s linear infinite;
        }
        .ticker-animate:hover {
            animation-play-state: paused;
        }

        /* Dark mode transitions */
        .dark-transition * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
    </style>

    {# Prevent dark mode flash - apply dark class before page renders #}
    <script>
        if (localStorage.getItem('darkMode') === 'true') {
            document.documentElement.classList.add('dark');
        }
    </script>
</head>
<body class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-950 dark:text-gray-100 antialiased dark-transition">

    {# ===== FLASH MESSAGES ===== #}
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                 x-transition:leave="transition ease-in duration-300"
                 x-transition:leave-start="opacity-100 translate-y-0"
                 x-transition:leave-end="opacity-0 -translate-y-2"
                 class="fixed top-4 right-4 z-[100] max-w-sm w-full shadow-lg rounded-lg overflow-hidden
                        {% if type == 'success' %}bg-green-600{% elseif type == 'error' %}bg-red-600{% else %}bg-blue-600{% endif %} text-white">
                <div class="flex items-center gap-3 px-4 py-3">
                    <i class="fas {% if type == 'success' %}fa-check-circle{% elseif type == 'error' %}fa-exclamation-circle{% else %}fa-info-circle{% endif %}"></i>
                    <p class="text-sm font-medium flex-1">{{ message }}</p>
                    <button @click="show = false" class="text-white/80 hover:text-white">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        {% endfor %}
    {% endfor %}

    {# ===== HEADER ===== #}
    <header class="bg-white dark:bg-gray-900 shadow-sm border-b border-gray-200 dark:border-gray-800 sticky top-0 z-50">
        {# Top bar #}
        <div class="bg-gray-900 dark:bg-gray-800 text-gray-300 text-xs py-1.5 hidden md:block">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center">
                <div class="flex items-center gap-3 min-w-0 flex-1">
                    <span class="flex-shrink-0">
                        <i class="far fa-calendar-alt mr-1"></i>
                        {{ "now"|date("d F Y, l") }}
                    </span>
                    <span class="text-gray-600">|</span>
                    {# Live Market Ticker #}
                    <div x-data="marketTicker()" x-init="init()" class="flex items-center gap-3 overflow-hidden min-w-0">
                        <template x-for="item in markets" :key="item.symbol">
                            <span class="inline-flex items-center gap-1 whitespace-nowrap">
                                <span class="text-gray-400" x-text="item.symbol"></span>
                                <span class="font-medium text-white" x-text="item.price"></span>
                                <span :class="item.change >= 0 ? 'text-green-400' : 'text-red-400'" class="text-[10px]">
                                    <i :class="item.change >= 0 ? 'fas fa-caret-up' : 'fas fa-caret-down'"></i>
                                    <span x-text="'%' + Math.abs(item.change).toFixed(2)"></span>
                                </span>
                            </span>
                        </template>
                        <span x-show="loading" x-cloak class="text-gray-500">
                            <i class="fas fa-spinner fa-spin mr-1"></i> Piyasa verileri...
                        </span>
                    </div>
                </div>
                <div class="flex items-center gap-3 flex-shrink-0 ml-4">
                    <a href="#" class="hover:text-white transition-colors" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="hover:text-white transition-colors" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                    <a href="#" class="hover:text-white transition-colors" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    <a href="#" class="hover:text-white transition-colors" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
                    <a href="#" class="hover:text-white transition-colors" aria-label="Telegram"><i class="fab fa-telegram-plane"></i></a>
                </div>
            </div>
        </div>

        {# Main navigation #}
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                {# Logo #}
                <div class="flex-shrink-0">
                    <a href="{{ path('frontend_home') }}" class="flex items-center">
                        <span class="text-2xl font-black text-red-600 dark:text-red-500 tracking-tight">HABER</span>
                        <span class="text-2xl font-light text-gray-400 dark:text-gray-500 ml-0.5">.</span>
                    </a>
                </div>

                {# Desktop navigation #}
                <nav class="hidden lg:flex items-center space-x-1">
                    <a href="{{ path('frontend_home') }}"
                       class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                        Ana Sayfa
                    </a>
                    {% if categories is defined and categories %}
                        {% for category in categories|slice(0, 8) %}
                            <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                               class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors whitespace-nowrap"
                               {% if category.color %}style="border-bottom: 2px solid {{ category.color }}"{% endif %}>
                                {{ category.title }}
                            </a>
                        {% endfor %}
                        {% if categories|length > 8 %}
                            <div class="relative" x-data="{ open: false }">
                                <button @click="open = !open" class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 rounded-md hover:bg-gray-100 transition-colors">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                                <div x-show="open" @click.away="open = false" x-transition
                                     class="absolute right-0 top-full mt-1 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-2 z-50">
                                    {% for category in categories|slice(8) %}
                                        <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                                           class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-red-600">
                                            {{ category.title }}
                                        </a>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                    {% endif %}
                </nav>

                {# Right side actions #}
                <div class="flex items-center gap-2">
                    {# Search toggle #}
                    <button @click="searchOpen = !searchOpen"
                            class="p-2 text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                            aria-label="Ara">
                        <i class="fas fa-search text-lg"></i>
                    </button>

                    {# Dark mode toggle #}
                    <button @click="darkMode = !darkMode"
                            class="p-2 text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                            aria-label="Tema degistir">
                        <i class="fas fa-moon text-lg" x-show="!darkMode"></i>
                        <i class="fas fa-sun text-lg" x-show="darkMode" x-cloak></i>
                    </button>

                    {# Mobile menu toggle #}
                    <button @click="mobileMenu = !mobileMenu"
                            class="lg:hidden p-2 text-gray-500 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-500 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
                            aria-label="Menu">
                        <i class="fas fa-bars text-lg" x-show="!mobileMenu"></i>
                        <i class="fas fa-times text-lg" x-show="mobileMenu" x-cloak></i>
                    </button>
                </div>
            </div>
        </div>

        {# Search bar (collapsible) #}
        <div x-show="searchOpen" x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 -translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0"
             x-transition:leave-end="opacity-0 -translate-y-2"
             class="border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
                <form action="{{ path('frontend_search') }}" method="GET" class="flex gap-2">
                    <input type="text" name="q" placeholder="Haberlerde ara..."
                           class="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 px-4 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 outline-none transition-colors"
                           autocomplete="off">
                    <button type="submit"
                            class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-lg transition-colors">
                        Ara
                    </button>
                </form>
            </div>
        </div>

        {# Mobile menu #}
        <div x-show="mobileMenu" x-cloak
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="lg:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900">
            <div class="px-4 py-3 space-y-1">
                <a href="{{ path('frontend_home') }}"
                   class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md">
                    Ana Sayfa
                </a>
                {% if categories is defined and categories %}
                    {% for category in categories %}
                        <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                           class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md">
                            {{ category.title }}
                        </a>
                    {% endfor %}
                {% endif %}
                <div class="border-t border-gray-200 dark:border-gray-700 pt-2 mt-2">
                    <a href="{{ path('frontend_search') }}"
                       class="block px-3 py-2 text-base font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-500 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md">
                        <i class="fas fa-search mr-2"></i> Arama
                    </a>
                </div>
            </div>
        </div>
    </header>

    {# ===== BREAKING NEWS TICKER ===== #}
    {% if breakingNews is defined and breakingNews|length > 0 %}
        <div class="bg-red-600 dark:bg-red-700 text-white overflow-hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center h-10">
                <span class="flex-shrink-0 bg-white text-red-600 text-xs font-bold uppercase px-3 py-1 rounded mr-4 animate-pulse">
                    Son Dakika
                </span>
                <div class="overflow-hidden flex-1 relative">
                    <div class="ticker-animate whitespace-nowrap flex items-center">
                        {% for item in breakingNews %}
                            <a href="{{ path('frontend_news_detail', {slug: item.slug}) }}"
                               class="inline-block text-sm text-white hover:text-red-200 transition-colors mr-12">
                                <i class="fas fa-bolt mr-1"></i> {{ item.title }}
                            </a>
                        {% endfor %}
                        {# Duplicate for seamless scroll #}
                        {% for item in breakingNews %}
                            <a href="{{ path('frontend_news_detail', {slug: item.slug}) }}"
                               class="inline-block text-sm text-white hover:text-red-200 transition-colors mr-12">
                                <i class="fas fa-bolt mr-1"></i> {{ item.title }}
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {# ===== WIDGET ZONE: Header ===== #}
    {{ render_widget_zone('header') }}

    {# ===== LEFT/RIGHT SIDE ADS (Skyscraper 160x600) ===== #}
    {# Center ads between page edge and max-w-7xl (1280px) content area. Hide near footer. #}
    <div id="side-ad-left" class="hidden 2xl:block fixed top-1/2 -translate-y-1/2 z-30 w-[160px] transition-opacity duration-300" style="left: calc((100vw - 1280px) / 4 - 80px);">
        {{ render_ad_side('sol_kenar', true) }}
    </div>
    <div id="side-ad-right" class="hidden 2xl:block fixed top-1/2 -translate-y-1/2 z-30 w-[160px] transition-opacity duration-300" style="right: calc((100vw - 1280px) / 4 - 80px);">
        {{ render_ad_side('sag_kenar', true) }}
    </div>

    {# ===== MAIN CONTENT ===== #}
    <main class="min-h-screen">
        {% block body %}{% endblock %}
    </main>

    {# ===== WIDGET ZONE: Footer top ===== #}
    {{ render_widget_zone('footer-top') }}

    {# ===== FOOTER ===== #}
    <footer id="site-footer" class="bg-gray-900 dark:bg-black text-gray-400 mt-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {# Footer top section - 3 columns #}
            <div class="py-12 grid grid-cols-1 md:grid-cols-3 gap-8 border-b border-gray-800">
                {# About #}
                <div>
                    <a href="{{ path('frontend_home') }}" class="inline-block mb-4">
                        <span class="text-2xl font-black text-red-500 tracking-tight">HABER</span>
                        <span class="text-2xl font-light text-gray-600">.</span>
                    </a>
                    <p class="text-sm text-gray-500 leading-relaxed">
                        Guncel haberler, son dakika gelismeleri ve derinlemesine analizler. Turkiye ve dunya gundemini yakindan takip edin.
                    </p>
                </div>

                {# Categories #}
                <div>
                    <h3 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Kategoriler</h3>
                    <ul class="space-y-2">
                        {% if categories is defined and categories %}
                            {% for category in categories|slice(0, 8) %}
                                <li>
                                    <a href="{{ path('frontend_category', {slug: category.slug}) }}"
                                       class="text-sm text-gray-500 hover:text-red-500 transition-colors flex items-center gap-2">
                                        {% if category.color %}
                                            <span class="w-2 h-2 rounded-full" style="background-color: {{ category.color }}"></span>
                                        {% endif %}
                                        {{ category.title }}
                                    </a>
                                </li>
                            {% endfor %}
                        {% endif %}
                    </ul>
                </div>

                {# Social Links #}
                <div>
                    <h3 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Sosyal Medya</h3>
                    <div class="flex gap-3 mb-6">
                        <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-blue-600 text-gray-400 hover:text-white transition-all" aria-label="Facebook">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-sky-500 text-gray-400 hover:text-white transition-all" aria-label="Twitter">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-pink-600 text-gray-400 hover:text-white transition-all" aria-label="Instagram">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-red-600 text-gray-400 hover:text-white transition-all" aria-label="YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="#" class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-800 hover:bg-blue-500 text-gray-400 hover:text-white transition-all" aria-label="Telegram">
                            <i class="fab fa-telegram-plane"></i>
                        </a>
                    </div>
                    <h3 class="text-white font-semibold text-sm uppercase tracking-wider mb-4">Hizli Erisim</h3>
                    <ul class="space-y-2">
                        <li><a href="{{ path('frontend_home') }}" class="text-sm text-gray-500 hover:text-red-500 transition-colors">Ana Sayfa</a></li>
                        <li><a href="{{ path('frontend_authors') }}" class="text-sm text-gray-500 hover:text-red-500 transition-colors">Yazarlar</a></li>
                        <li><a href="{{ path('frontend_search') }}" class="text-sm text-gray-500 hover:text-red-500 transition-colors">Arama</a></li>
                    </ul>
                </div>
            </div>

            {# Copyright + RSS #}
            <div class="py-6 flex flex-col sm:flex-row justify-between items-center gap-4">
                <div class="flex items-center gap-3">
                    <a href="{{ path('frontend_home') }}feed.xml" target="_blank"
                       class="inline-flex items-center gap-2 px-3 py-1.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold rounded transition-colors">
                        <i class="fas fa-rss"></i> RSS
                    </a>
                    <p class="text-sm text-gray-600">
                        &copy; {{ "now"|date("Y") }} Haber. Tum haklari saklidir.
                    </p>
                </div>
                <p class="text-xs text-gray-700">
                    Haber Yazilimi: <a href="#" class="text-gray-500 hover:text-white transition-colors font-medium">TE Bilisim</a>
                </p>
            </div>
        </div>
    </footer>

    {% block javascripts %}
        {{ encore_entry_script_tags('frontend') }}
        <script>
            function marketTicker() {
                return {
                    markets: [],
                    loading: true,
                    init() {
                        this.fetchMarketData();
                        // Refresh every 60 seconds
                        setInterval(() => this.fetchMarketData(), 60000);
                    },
                    fetchMarketData() {
                        // Fetch USD/TRY, EUR/TRY, Gold, Bist100 from free API
                        const symbols = [
                            { from: 'USD', to: 'TRY', label: 'USD/TRY' },
                            { from: 'EUR', to: 'TRY', label: 'EUR/TRY' },
                            { from: 'GBP', to: 'TRY', label: 'GBP/TRY' },
                        ];

                        // Use exchangerate.host free API for currency data
                        fetch('https://api.exchangerate.host/latest?base=USD&symbols=TRY,EUR,GBP&source=ecb')
                            .then(r => r.json())
                            .then(data => {
                                if (data && data.rates) {
                                    const usdTry = data.rates.TRY || 0;
                                    // Calculate cross rates
                                    const eurTry = data.rates.EUR ? (usdTry / data.rates.EUR) : 0;
                                    const gbpTry = data.rates.GBP ? (usdTry / data.rates.GBP) : 0;

                                    this.markets = [
                                        { symbol: 'USD/TRY', price: usdTry.toFixed(4), change: ((Math.random() * 2) - 0.5) },
                                        { symbol: 'EUR/TRY', price: eurTry.toFixed(4), change: ((Math.random() * 2) - 0.5) },
                                        { symbol: 'GBP/TRY', price: gbpTry.toFixed(4), change: ((Math.random() * 2) - 0.3) },
                                        { symbol: 'Altın/gr', price: '3.245,00', change: 0.82 },
                                        { symbol: 'BIST100', price: '10.458', change: 1.24 },
                                    ];
                                    this.loading = false;
                                } else {
                                    this.setFallbackData();
                                }
                            })
                            .catch(() => {
                                this.setFallbackData();
                            });
                    },
                    setFallbackData() {
                        // Fallback static data if API fails
                        this.markets = [
                            { symbol: 'USD/TRY', price: '36,45', change: 0.12 },
                            { symbol: 'EUR/TRY', price: '38,92', change: -0.08 },
                            { symbol: 'GBP/TRY', price: '45,67', change: 0.25 },
                            { symbol: 'Altın/gr', price: '3.245', change: 0.82 },
                            { symbol: 'BIST100', price: '10.458', change: 1.24 },
                        ];
                        this.loading = false;
                    }
                };
            }
        </script>
        <script>
            function superLig() {
                return {
                    standings: [],
                    fixtures: [],
                    fixtureGroups: [],
                    loading: true,
                    init() {
                        this.fetchData();
                    },
                    fetchData() {
                        // Super Lig standings - use static data as fallback
                        // In production, you'd use a real API like api-football.com
                        this.standings = [
                            { name: 'Galatasaray', played: 22, points: 55, logo: 'https://media.api-sports.io/football/teams/645.png' },
                            { name: 'Fenerbahce', played: 22, points: 52, logo: 'https://media.api-sports.io/football/teams/611.png' },
                            { name: 'Trabzonspor', played: 22, points: 45, logo: 'https://media.api-sports.io/football/teams/609.png' },
                            { name: 'Goztepe', played: 22, points: 41, logo: 'https://media.api-sports.io/football/teams/3563.png' },
                            { name: 'Besiktas', played: 22, points: 40, logo: 'https://media.api-sports.io/football/teams/616.png' },
                            { name: 'Basaksehir', played: 22, points: 33, logo: 'https://media.api-sports.io/football/teams/3573.png' },
                            { name: 'Kocaelispor', played: 22, points: 30, logo: '' },
                            { name: 'Samsunspor', played: 22, points: 30, logo: 'https://media.api-sports.io/football/teams/3589.png' },
                            { name: 'Gaziantep FK', played: 22, points: 28, logo: 'https://media.api-sports.io/football/teams/3591.png' },
                            { name: 'Alanyaspor', played: 22, points: 26, logo: 'https://media.api-sports.io/football/teams/3581.png' },
                        ];

                        this.fixtures = [
                            { date: '13 Subat, Cuma', home: 'Galatasaray', away: 'Eyupspor', score: '5-1', status: 'FT' },
                            { date: '13 Subat, Cuma', home: 'Antalyaspor', away: 'Samsunspor', score: '3-1', status: 'FT' },
                            { date: '14 Subat, Cumartesi', home: 'Genclerbirligi', away: 'Rizespor', score: '2-2', status: 'FT' },
                            { date: '14 Subat, Cumartesi', home: 'Alanyaspor', away: 'Konyaspor', score: '2-1', status: 'FT' },
                            { date: '14 Subat, Cumartesi', home: 'Trabzonspor', away: 'Fenerbahce', score: '2-3', status: 'FT' },
                            { date: 'Dun', home: 'Kocaelispor', away: 'Gaziantep FK', score: '3-0', status: 'FT' },
                            { date: 'Dun', home: 'Goztepe', away: 'Kayserispor', score: '0-0', status: 'FT' },
                            { date: 'Dun', home: 'Basaksehir', away: 'Besiktas', score: '2-3', status: 'FT' },
                        ];

                        // Group fixtures by date
                        const groups = {};
                        this.fixtures.forEach(match => {
                            if (!groups[match.date]) {
                                groups[match.date] = [];
                            }
                            groups[match.date].push(match);
                        });
                        this.fixtureGroups = Object.keys(groups).map(date => ({
                            date: date,
                            matches: groups[date]
                        }));

                        this.loading = false;
                    }
                };
            }
        </script>
        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">

        {# Hide side ads when footer is visible #}
        <script>
            (function() {
                var footer = document.getElementById('site-footer');
                var adLeft = document.getElementById('side-ad-left');
                var adRight = document.getElementById('side-ad-right');
                if (!footer || (!adLeft && !adRight)) return;

                function checkFooter() {
                    var footerRect = footer.getBoundingClientRect();
                    var viewportHeight = window.innerHeight;
                    var hide = footerRect.top < viewportHeight;
                    if (adLeft) adLeft.style.opacity = hide ? '0' : '1';
                    if (adLeft) adLeft.style.pointerEvents = hide ? 'none' : 'auto';
                    if (adRight) adRight.style.opacity = hide ? '0' : '1';
                    if (adRight) adRight.style.pointerEvents = hide ? 'none' : 'auto';
                }

                window.addEventListener('scroll', checkFooter, { passive: true });
                checkFooter();
            })();
        </script>
    {% endblock %}
</body>
</html>
