{% extends 'base.html' %}

{% block title %}服务器内部错误 - 500 - 长白山消防救援支队{% 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">系统错误</li>
            </ol>
        </nav>

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

                <!-- 错误图标 -->
                <div class="mb-4">
                    <!-- 使用齿轮/扳手图标，代表系统维护或故障 -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#6c757d" class="bi bi-gear-fill" viewBox="0 0 16 16">
                        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
                    </svg>
                </div>

                <!-- 错误标题 -->
                <h1 class="display-1 fw-bold text-secondary" style="font-size: 6rem; line-height: 1;">500</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">
                    <a href="/" class="btn btn-primary btn-lg px-4">
                        <i class="bi bi-house-door-fill"></i> 返回首页
                    </a>
                    <!-- 刷新按钮 -->
                    <button onclick="window.location.reload()" class="btn btn-outline-secondary btn-lg px-4">
                        <i class="bi bi-arrow-clockwise"></i> 重试
                    </button>
                </div>

                <!-- 技术支持提示 -->
                <div class="mt-5 p-3 bg-light rounded">
                    <p class="mb-0 text-muted small">
                        <strong>温馨提示：</strong><br>
                        如果您急需办理业务，请稍后再试，或联系网站管理员。<br>
                        联系电话：0433-xxxxxxx (示例)
                    </p>
                </div>

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