{% extends 'base.html' %}
{% block content %}
<div class="container py-5">
    <div class="text-center mb-5 fade-in-up">
        <h2 class="fw-bold"><i class="bi bi-journal-richtext me-2 text-primary"></i>茄子健康百科</h2>
        <p class="text-muted">查阅各类病虫害症状与防治专业建议以及品相类型</p>
        <div class="col-md-6 mx-auto mt-4">
            <form action="" method="get" class="d-flex">
                <input type="text" name="search" class="form-control rounded-pill me-2" placeholder="搜索病害名称..." value="{{ query }}">
                <button type="submit" class="btn btn-primary rounded-pill px-4">搜索</button>
            </form>
        </div>
    </div>





    <div class="row g-4">
        {% for wiki in wikis %}
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm shadow-hover">
                {% if wiki.wiki_image %}
                <img src="{{ wiki.wiki_image.url }}" class="card-img-top" alt="{{ wiki.name }}" style="height: 200px; object-fit: cover;">
                {% endif %}
                <div class="card-body">
                    <span class="badge bg-soft-primary text-primary mb-2">{{ wiki.get_category_display }}</span>
                    <h5 class="card-title fw-bold">{{ wiki.name }}</h5>
                    <p class="card-text text-muted small">{{ wiki.symptoms|truncatechars:60 }}</p>
                    <a href="{% url 'encyclopedia:wiki_detail' wiki.id %}" class="btn btn-link p-0 text-decoration-none">阅读详情 <i class="bi bi-arrow-right"></i></a>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="text-center py-5">
            <i class="bi bi-search" style="font-size: 3rem; color: #dee2e6;"></i>
            <p class="text-muted mt-3">未找到相关百科条目</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}