{% extends "base.html" %}

{% block title %}{{ site_name }} - {{ 'أخبار شرق السودان' if is_rtl else 'Eastern Sudan News' }}{% endblock %}

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

    <!-- Hero Section -->
    {% if featured %}
    <section class="hero-section">
        <div class="hero-grid">
            <!-- Main featured article -->
            <div class="hero-main">
                {% if featured[0].featured_image %}
                <img src="{{ url_for('static', filename=featured[0].featured_image) }}" 
                     alt="{{ featured[0].title(lang) }}" class="hero-image" loading="eager">
                {% else %}
                <div class="hero-image" style="background: linear-gradient(135deg, var(--brand-blue), var(--brand-primary)); height: 400px;"></div>
                {% endif %}
                <div class="hero-content">
                    <a href="{{ url_for('category_view', slug=featured[0].category.slug) }}" 
                       class="hero-category" style="color: {{ featured[0].category.color }};">
                        {{ featured[0].category.name(lang) }}
                    </a>
                    <h2><a href="{{ url_for('article_detail', slug=featured[0].slug) }}">
                        {{ featured[0].title(lang) }}
                    </a></h2>
                    {% if featured[0].subtitle(lang) %}
                    <p class="hero-subtitle">{{ featured[0].subtitle(lang) }}</p>
                    {% endif %}
                </div>
            </div>

            <!-- Side featured articles -->
            <div class="hero-side">
                {% for article in featured[1:3] %}
                <div class="hero-card">
                    <div class="hero-card-content">
                        <a href="{{ url_for('category_view', slug=article.category.slug) }}"
                           class="card-category" style="color: {{ article.category.color }};">
                            {{ article.category.name(lang) }}
                        </a>
                        <h3><a href="{{ url_for('article_detail', slug=article.slug) }}">
                            {{ article.title(lang) }}
                        </a></h3>
                    </div>
                    {% if article.featured_image %}
                    <img src="{{ url_for('static', filename=article.featured_image) }}" 
                         alt="{{ article.title(lang) }}" class="hero-card-img" loading="lazy">
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </section>
    {% endif %}

    <!-- Latest News with Sidebar -->
    <div class="content-with-sidebar section">
        <div class="main-content-area">
            <div class="section-header" style="border-top-color: var(--brand-dark);">
                <h2 class="section-title">{{ 'آخر الأخبار' if is_rtl else 'Latest News' }}</h2>
            </div>
            <div class="article-grid">
                {% for article in latest %}
                <article class="article-card">
                    {% if article.featured_image %}
                    <a href="{{ url_for('article_detail', slug=article.slug) }}">
                        <img src="{{ url_for('static', filename=article.featured_image) }}" 
                             alt="{{ article.title(lang) }}" class="article-card-img" loading="lazy">
                    </a>
                    {% endif %}
                    <div class="article-card-body">
                        <a href="{{ url_for('category_view', slug=article.category.slug) }}"
                           class="card-category" style="color: {{ article.category.color }};">
                            {{ article.category.name(lang) }}
                        </a>
                        <h3><a href="{{ url_for('article_detail', slug=article.slug) }}">
                            {{ article.title(lang) }}
                        </a></h3>
                        <div class="card-meta">
                            {{ article.published_at.strftime('%b %d, %Y') if article.published_at else '' }}
                        </div>
                        {% if article.has_media %}
                        <div class="media-badge">
                            {% if article.youtube_url or article.video_url %}
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                            {{ 'فيديو' if is_rtl else 'Video' }}
                            {% elif article.audio_url %}
                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
                            {{ 'صوت' if is_rtl else 'Audio' }}
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </article>
                {% endfor %}
            </div>
        </div>

        <!-- Sidebar: Most Read -->
        <aside>
            <div class="sidebar-widget">
                <h3>{{ 'الأكثر قراءة' if is_rtl else 'Most Read' }}</h3>
                <ol class="most-read-list">
                    {% for article in most_read %}
                    <li class="most-read-item">
                        <h4><a href="{{ url_for('article_detail', slug=article.slug) }}">
                            {{ article.title(lang) }}
                        </a></h4>
                    </li>
                    {% endfor %}
                </ol>
            </div>
        </aside>
    </div>

    <!-- Category sections -->
    {% for cat, articles in cat_articles.items() %}
    <section class="section">
        <div class="section-header" style="border-top-color: {{ cat.color }};">
            <h2 class="section-title" style="color: {{ cat.color }};">{{ cat.name(lang) }}</h2>
            <a href="{{ url_for('category_view', slug=cat.slug) }}" class="section-more">
                {{ 'المزيد ←' if is_rtl else 'More →' }}
            </a>
        </div>
        <div class="article-grid">
            {% for article in articles %}
            <article class="article-card">
                {% if article.featured_image %}
                <a href="{{ url_for('article_detail', slug=article.slug) }}">
                    <img src="{{ url_for('static', filename=article.featured_image) }}" 
                         alt="{{ article.title(lang) }}" class="article-card-img" loading="lazy">
                </a>
                {% endif %}
                <div class="article-card-body">
                    <h3><a href="{{ url_for('article_detail', slug=article.slug) }}">
                        {{ article.title(lang) }}
                    </a></h3>
                    <div class="card-meta">
                        {{ article.published_at.strftime('%b %d, %Y') if article.published_at else '' }}
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
    </section>
    {% endfor %}

</div>
{% endblock %}