{% extends 'base.html' %}
{% block content %}
<div class="container py-5">
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'encyclopedia:wiki_list' %}">百科列表</a></li>
            <li class="breadcrumb-item active">{{ wiki.name }}</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-8">
            <h1 class="fw-bold mb-3">{{ wiki.name }}</h1>
            <span class="badge bg-primary mb-4">{{ wiki.get_category_display }}</span>
            
            <div class="card border-0 shadow-sm p-4 mb-4">
                <h5 class="fw-bold text-danger"><i class="bi bi-exclamation-triangle me-2"></i>发病症状</h5>
                <p class="text-secondary" style="line-height: 1.8;">{{ wiki.symptoms|linebreaks }}</p>
            </div>

            <div class="card border-0 shadow-sm p-4">
                <h5 class="fw-bold text-success"><i class="bi bi-shield-check me-2"></i>防治建议</h5>
                <p class="text-secondary" style="line-height: 1.8;">{{ wiki.treatment|linebreaks }}</p>
            </div>
        </div>
        
        <div class="col-lg-4">
            {% if wiki.wiki_image %}
            <div class="card border-0 shadow-sm overflow-hidden mb-4">
                <img src="{{ wiki.wiki_image.url }}" class="img-fluid" alt="{{ wiki.name }}">
            </div>
            {% endif %}
            <div class="alert alert-info border-0 shadow-sm">
                <h6 class="fw-bold"><i class="bi bi-info-circle me-2"></i>温馨提示</h6>
                <small>百科内容仅供参考，如遇大面积病害请及时联系当地农技专家。</small>
            </div>
        </div>
    </div>
</div>
{% endblock %}