{% extends "base.html" %}
{% block title %}{{ site_name }} - {{ 'أخبار شرق السودان' if lang == 'ar' else 'Eastern Sudan News' }}{% endblock %}

{% block content %}
<div class="homepage">

    <!-- Featured Slider -->
    {% if featured_articles %}
    <section class="featured-slider" id="featuredSlider">
        <div class="slider-track">
            {% for article in featured_articles %}
            <div class="slide {% if loop.first %}active{% endif %}">
                <a href="/article/{{ article.slug }}" class="slide-link">
                    {% if article.featured_image %}
                    <img src="{{ article.featured_image }}" alt="{{ article.title_ar if lang == 'ar' else article.title_en }}" loading="{% if loop.first %}eager{% else %}lazy{% endif %}">
                    {% else %}
                    <div class="slide-placeholder"></div>
                    {% endif %}
                    <div class="slide-overlay">
                        <span class="slide-cat" style="background:{{ article.category.color if article.category else '#c70000' }}">
                            {{ article.category.name_ar if lang == 'ar' else article.category.name_en if article.category else '' }}
                        </span>
                        <h2>{{ article.title_ar if lang == 'ar' else article.title_en }}</h2>
                        <p class="slide-meta">
                            {% if article.author %}
                            <span>{{ article.author.display_name_ar if lang == 'ar' else article.author.display_name }}</span> · 
                            {% endif %}
                            <time>{{ article.published_at.strftime('%d/%m/%Y') if article.published_at else '' }}</time>
                        </p>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
        <button class="slider-btn slider-prev" aria-label="Previous"><i class="fas fa-chevron-{{ 'right' if lang == 'ar' else 'left' }}"></i></button>
        <button class="slider-btn slider-next" aria-label="Next"><i class="fas fa-chevron-{{ 'left' if lang == 'ar' else 'right' }}"></i></button>
        <div class="slider-dots">
            {% for article in featured_articles %}
            <button class="dot {% if loop.first %}active{% endif %}" data-index="{{ loop.index0 }}"></button>
            {% endfor %}
        </div>
    </section>
    {% endif %}

    <!-- Main content + sidebar -->
    <div class="content-with-sidebar">
        <div class="main-content">

            <!-- Top stories grid -->
            {% if latest_articles %}
            <section class="top-stories">
                <div class="section-header">
                    <h2>{{ 'آخر الأخبار' if lang == 'ar' else 'Latest News' }}</h2>
                </div>
                <div class="stories-grid">
                    {% for article in latest_articles[:6] %}
                    <article class="story-card {% if loop.first %}story-main{% endif %}">
                        <a href="/article/{{ article.slug }}" class="story-link">
                            {% if article.featured_image %}
                            <div class="story-img">
                                <img src="{{ article.featured_image }}" alt="{{ article.title_ar if lang == 'ar' else article.title_en }}" loading="lazy">
                            </div>
                            {% endif %}
                            <div class="story-body">
                                <span class="story-cat" style="color:{{ article.category.color if article.category else '#c70000' }}">
                                    {{ article.category.name_ar if lang == 'ar' else article.category.name_en if article.category else '' }}
                                </span>
                                <h3>{{ article.title_ar if lang == 'ar' else article.title_en }}</h3>
                                {% if article.subtitle_en or article.subtitle_ar %}
                                <p class="story-excerpt">{{ (article.subtitle_ar if lang == 'ar' else article.subtitle_en)[:120] }}...</p>
                                {% endif %}
                                <div class="story-meta">
                                    {% if article.author %}
                                    <span class="story-author">{{ article.author.display_name_ar if lang == 'ar' else article.author.display_name }}</span>
                                    {% endif %}
                                    <time>{{ article.published_at.strftime('%d/%m/%Y') if article.published_at else '' }}</time>
                                </div>
                            </div>
                        </a>
                    </article>
                    {% endfor %}
                </div>
            </section>
            {% endif %}

            <!-- Between sections ad -->
            {% if between_ads %}
            <div class="ad-space ad-between">
                {% for ad in between_ads %}
                <div class="ad-item" data-ad-id="{{ ad.id }}">
                    {% if ad.image_url %}
                    <a href="{{ ad.target_url }}" target="_blank" rel="noopener sponsored" onclick="trackAdClick({{ ad.id }})">
                        <img src="{{ ad.image_url }}" alt="{{ ad.title }}" loading="lazy">
                    </a>
                    {% elif ad.html_content %}{{ ad.html_content|safe }}{% endif %}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Category sections -->
            {% for cat in categories %}
            {% if cat.id in cat_articles %}
            <section class="category-section">
                <div class="section-header">
                    <h2 style="border-color:{{ cat.color }}">
                        <a href="/category/{{ cat.slug }}">{{ cat.name_ar if lang == 'ar' else cat.name_en }}</a>
                    </h2>
                    <a href="/category/{{ cat.slug }}" class="see-all">{{ 'عرض الكل' if lang == 'ar' else 'See all' }} <i class="fas fa-arrow-{{ 'left' if lang == 'ar' else 'right' }}"></i></a>
                </div>
                <div class="cat-grid">
                    {% for article in cat_articles[cat.id] %}
                    <article class="cat-card">
                        <a href="/article/{{ article.slug }}">
                            {% if article.featured_image %}
                            <div class="cat-card-img">
                                <img src="{{ article.featured_image }}" alt="" loading="lazy">
                            </div>
                            {% endif %}
                            <div class="cat-card-body">
                                <h4>{{ article.title_ar if lang == 'ar' else article.title_en }}</h4>
                                <div class="story-meta">
                                    {% if article.author %}
                                    <span class="story-author">{{ article.author.display_name_ar if lang == 'ar' else article.author.display_name }}</span>
                                    {% endif %}
                                    <time>{{ article.published_at.strftime('%d/%m/%Y') if article.published_at else '' }}</time>
                                </div>
                            </div>
                        </a>
                    </article>
                    {% endfor %}
                </div>
            </section>
            {% endif %}
            {% endfor %}

            <!-- Auto-updating latest news -->
            <section class="live-updates" id="liveUpdates">
                <div class="section-header">
                    <h2><span class="live-dot"></span> {{ 'تحديث مباشر' if lang == 'ar' else 'Live Updates' }}</h2>
                </div>
                <div class="live-list" id="liveList">
                    {% for article in latest_articles[6:12] %}
                    <article class="live-item">
                        <a href="/article/{{ article.slug }}">
                            <time>{{ article.published_at.strftime('%H:%M') if article.published_at else '' }}</time>
                            <span>{{ article.title_ar if lang == 'ar' else article.title_en }}</span>
                        </a>
                    </article>
                    {% endfor %}
                </div>
            </section>
        </div>

        <!-- Sidebar -->
        <aside class="sidebar">
            <!-- Most Read -->
            <div class="sidebar-widget most-read-widget">
                <h3 class="widget-title">{{ 'الأكثر قراءة' if lang == 'ar' else 'Most Read' }}</h3>
                <ol class="most-read-list">
                    {% for article in most_read[:7] %}
                    <li>
                        <a href="/article/{{ article.slug }}">
                            <span class="mr-rank">{{ loop.index }}</span>
                            <span class="mr-title">{{ article.title_ar if lang == 'ar' else article.title_en }}</span>
                        </a>
                    </li>
                    {% endfor %}
                </ol>
            </div>

            <!-- Sidebar Ads -->
            {% for ad in sidebar_ads %}
            <div class="sidebar-widget ad-widget" data-ad-id="{{ ad.id }}">
                {% if ad.image_url %}
                <a href="{{ ad.target_url }}" target="_blank" rel="noopener sponsored" onclick="trackAdClick({{ ad.id }})">
                    <img src="{{ ad.image_url }}" alt="{{ ad.title }}" loading="lazy">
                </a>
                {% elif ad.html_content %}{{ ad.html_content|safe }}{% endif %}
            </div>
            {% endfor %}
        </aside>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Auto-update latest news every 60 seconds
    setInterval(function(){
        fetch('/api/latest-news?lang={{ lang }}')
        .then(r=>r.json())
        .then(articles=>{
            const list = document.getElementById('liveList');
            if(!list || !articles.length) return;
            list.innerHTML = '';
            articles.slice(0,6).forEach(a=>{
                const d = a.date ? new Date(a.date).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'}) : '';
                list.innerHTML += `<article class="live-item"><a href="/article/${a.slug}"><time>${d}</time><span>${a.title}</span></a></article>`;
            });
        }).catch(()=>{});
    }, 60000);
</script>
{% endblock %}