{% extends 'base.html' %}

{% block title %}{{ article.section.title }} - {{ site_info.name }}{% endblock %}

{% block content %}
    <div class="container mt-4">
        <!-- 1. 面包屑导航 -->
        <nav aria-label="breadcrumb" style="margin-left: -10px;">
            <ol class="breadcrumb" style="background-color: transparent !important; padding-bottom: 0;">
                <li class="breadcrumb-item"><a href="/">网站首页</a></li>
                <!-- 动态显示所属板块 -->
                <li class="breadcrumb-item"><a href="{% url "front:news_main" %}">{{ article.section.parent.title }}</a>
                </li>
                <li class="breadcrumb-item"><a
                        href="{% url "front:news_list" article.section.code %}">{{ article.section.title }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">文章详情</li>
            </ol>
        </nav>

        <!-- 2. 文章主体内容 -->
        <div class="row justify-content-center mt-4">
            <div class="col-lg-10">

                <!-- 文章头部信息 -->
                <div class="text-center mb-5">
                    <h1 class="fw-bold mb-3">{{ article.title }}</h1>
                    <div class="text-muted small">
                        <span class="me-3"><i class="bi bi-clock"></i> {{ article.created_at|date:"Y-m-d H:i" }}</span>
                        <span class="me-3"><i
                                class="bi bi-person"></i> {{ article.author.username|default:"管理员" }}</span>
                        <span><i class="bi bi-eye"></i> 阅读数：{{ article.views|default:0 }}</span>
                    </div>
                </div>

                <!-- 封面图 (如果有) -->
                {% if article.cover %}
                    <div class="mb-4 text-center">
                        <img src="{{ article.cover.url }}" alt="{{ article.title }}" class="img-fluid rounded shadow-sm"
                             style="max-height: 400px; width: 100%; object-fit: cover;">
                    </div>
                {% endif %}

                <!-- 正文内容 -->
                <div class="article-content mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #333;">
                    {{ article.content|safe }}
                </div>

                <!-- 4. 底部操作栏 -->
                <div class="d-grid gap-4 d-sm-flex justify-content-sm-center border-top pt-4 mt-5" style="gap: 30px;">
                    <a href="javascript:history.back()" class="btn btn-outline-secondary btn px-3">
                        <i class="bi bi-arrow-left"></i> 返回上一页
                    </a>
                    <a href="/" class="btn btn-primary btn px-3">
                        <i class="bi bi-house-door-fill"></i> 返回首页
                    </a>
                </div>

            </div>
        </div>
    </div>
{% endblock %}