{% extends "bottom.html" %}
{% load static %}

{% block stylesheethref %}
        <link rel="stylesheet" href="{% static 'index.css' %}">
{% endblock %}

{% block content %}
    <div class="container">
            <!-- 文章容器 -->
            <div class="article-list">
                {% for artcle in artchles %}
                        <article class="article-card">
                            <div class="article-content">
                                <div class="article-image">
                                    <img src="http://iph.href.lu/200x150?text=正在开发中" alt="文章图片">
                                </div>
                                <div class="article-info">
                                    <p class="article-id" style="display: none">{{ artcle.id }}</p>
                                    <h2 class="article-title">{{ artcle.title }}</h2>
                                  <p class="article-excerpt">
                                        {{ artcle.abstract }}
                                  </p>
                                    <div class="article-meta">
                                        <div class="meta-data">
                                            <span>发布时间：{{ artcle.created }}</span>
                                            <span>点赞：{{ artcle.stat }}</span>
                                            <span>阅读: {{ artcle.read }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </article>
                {% endfor %}
            </div>
        </div>
{% endblock %}
{% block script %}
    document.addEventListener('DOMContentLoaded', function() {
            // 搜索功能
            const searchBtn = document.querySelector('.search-box button');
            const searchInput = document.querySelector('.search-box input');

            searchBtn.addEventListener('click', function() {
                const query = searchInput.value.trim();
                if (query) {
                    alert('搜索: ' + query);
                    // 实际应用中这里应该是跳转到搜索页面或执行搜索操作
                }
            });

            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const query = searchInput.value.trim();
                    if (query) {
                        alert('搜索: ' + query);
                        // 实际应用中这里应该是跳转到搜索页面或执行搜索操作
                    }
                }
            });

            // 文章卡片交互
            const articleCards = document.querySelectorAll('.article-card');
            articleCards.forEach(card => {
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.read-more')) {
                        const id = this.querySelector('.article-id').textContent;
                        window.open(`/archives/${id}`)
                    }
                });
            });
        });
{% endblock %}