{% extends 'base.html' %}

{% block title %}页面未找到 - 404 - 长白山消防救援支队{% endblock %}

{% block content %}
    <div class="container mt-5">
        <!-- 面包屑导航 -->
        <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 active" aria-current="page">404</li>
            </ol>
        </nav>

        <!-- 404 核心内容区域 -->
        <div class="row justify-content-center mt-5">
            <div class="col-md-8 text-center">

                <!-- 错误图标与代码 -->
                <div class="mb-4">
                    <!-- 使用简单的 SVG 图标，你也可以换成消防相关的图片 -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#dc3545" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                    </svg>
                </div>

                <!-- 错误标题 -->
                <h1 class="display-1 fw-bold text-danger" style="font-size: 6rem; line-height: 1;">404</h1>

                <!-- 错误描述 -->
                <h2 class="h3 mb-3">抱歉，您访问的页面不存在</h2>
                <p class="lead text-muted mb-4">
                    您请求的页面可能已被删除、名称已更改或暂时不可用。<br>
                    请检查网址是否正确，或返回首页查找所需信息。
                </p>

                <!-- 操作按钮 -->
                <div class="d-grid gap-30 d-sm-flex justify-content-sm-center" style="gap: 30px;">
                    <a href="/" class="btn btn-primary btn-md w-auto px-3">
                        <i class="bi bi-house-door-fill"></i> 返回首页
                    </a>
                    <button onclick="history.back()" class="btn btn-outline-secondary w-auto btn-md px-3">
                        <i class="bi bi-arrow-left"></i> 返回上一页
                    </button>
                </div>

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