{% extends "base.html" %}

{% block title %}{{ super() }}{% endblock %}

{% block content %}
    <!-- 头条新闻 -->
    {% if featured_news %}
        <div class="featured-news">
            <div class="featured-news-content">
                <div class="featured-image">
                    <a href="{{ url_for('news_detail', news_id=featured_news.id) }}">
                        {% if featured_news.image %}
                            <img src="{{ url_for('static', filename=featured_news.image.replace('static/', '')) }}" alt="{{ featured_news.title }}">
                        {% else %}
                            <img src="https://picsum.photos/800/400?random={{ featured_news.id }}" alt="{{ featured_news.title }}">
                        {% endif %}
                    </a>
                </div>
                <div class="featured-text">
                    <h1 class="featured-title"><a href="{{ url_for('news_detail', news_id=featured_news.id) }}">{{ featured_news.title }}</a></h1>
                    <p class="featured-excerpt">{{ featured_news.content[:150] }}...</p>
                    <p class="news-card-date">发布于: {{ featured_news.date }}</p>
                </div>
            </div>
        </div>
    {% endif %}
    
    <!-- 新闻数量选择器 -->
    <div class="news-per-page text-center mb-4">
        <form method="get" action="{{ url_for('index') }}">
            <label for="per_page">每页显示：</label>
            <select name="per_page" id="per_page" onchange="this.form.submit()">
                <option value="5" {% if per_page == 5 %}selected{% endif %}>5条</option>
                <option value="10" {% if per_page == 10 %}selected{% endif %}>10条</option>
                <option value="20" {% if per_page == 20 %}selected{% endif %}>20条</option>
            </select>
        </form>
    </div>
    
    <!-- 新闻列表 -->
    {% if news_items %}
        <div class="news-grid">
            {% for news in news_items %}
                <div class="news-card">
                    <div class="news-card-image">
                        <a href="{{ url_for('news_detail', news_id=news.data.id) }}">
                            {% if news.data.image %}
                                <img src="{{ url_for('static', filename=news.data.image.replace('static/', '')) }}" alt="{{ news.data.title }}">
                            {% else %}
                                <img src="https://picsum.photos/400/200?random={{ news.data.id }}" alt="{{ news.data.title }}">
                            {% endif %}
                        </a>
                    </div>
                    <div class="news-card-content">
                        <h3 class="news-card-title"><a href="{{ url_for('news_detail', news_id=news.data.id) }}">{{ news.data.title }}</a></h3>
                        <p class="news-card-date">发布于: {{ news.data.date }}</p>
                        <p class="news-card-stats">浏览: {{ news.data.views or 0 }} • 评论: {{ news.data.comments_count or 0 }}</p>
                        <div class="news-like">
                            <form method="post" action="{{ url_for('toggle_news_like', news_id=news.data.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-primary">
                                    {% if news.liked %}取消点赞{% else %}点赞{% endif %}
                                </button>
                                <span class="ml-2">{{ news.like_count }} 个赞</span>
                            </form>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="no-news">
            <p>暂无新闻</p>
        </div>
    {% endif %}
    
    <!-- 分页 -->
    {% if pagination %}
        <div class="pagination">
            {% if pagination.has_prev %}
                <a href="{{ url_for('index', page=pagination.prev_num, per_page=per_page) }}">上一页</a>
            {% endif %}
            
            {% for page_num in pagination.iter_pages(left_edge=2, right_edge=2, left_current=2, right_current=2) %}
                {% if page_num %}
                    {% if page_num == pagination.page %}
                        <a href="#" class="active">{{ page_num }}</a>
                    {% else %}
                        <a href="{{ url_for('index', page=page_num, per_page=per_page) }}">{{ page_num }}</a>
                    {% endif %}
                {% else %}
                    <span>...</span>
                {% endif %}
            {% endfor %}
            
            {% if pagination.has_next %}
                <a href="{{ url_for('index', page=pagination.next_num, per_page=per_page) }}">下一页</a>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}