{% extends 'base.html' %}
{% load static %}

{% block title %}系统警告 - 数据擦除确认{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 警戒级全屏居中布局
       ========================================================= */
    .delete-container {
        max-width: 650px;
        margin: 80px auto; /* 居中显示 */
        padding: 0 20px;
    }

    /* =========================================================
       2. 危险级毛玻璃面板 (Danger Panel)
       ========================================================= */
    .glass-panel-danger {
        background: rgba(40, 10, 15, 0.85); /* 带有压迫感的暗红色背景 */
        border: 1px solid rgba(255, 71, 87, 0.6);
        border-radius: 8px;
        padding: 40px;
        box-shadow: 0 0 40px rgba(255, 71, 87, 0.2), inset 0 0 30px rgba(255, 71, 87, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: relative;
    }

    /* 红色发光角 */
    .glass-panel-danger::before, .glass-panel-danger::after,
    .glass-panel-danger .corner-bl, .glass-panel-danger .corner-br {
        content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid #ff4757;
    }
    .glass-panel-danger::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
    .glass-panel-danger::after { top: -1px; right: -1px; border-left: none; border-bottom: none; }
    .glass-panel-danger .corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
    .glass-panel-danger .corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

    /* =========================================================
       3. 标题与警告提示
       ========================================================= */
    .warning-header {
        text-align: center;
        border-bottom: 1px dashed rgba(255, 71, 87, 0.4);
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    .warning-header h2 {
        color: #ff4757; font-weight: 900; letter-spacing: 4px; margin: 0;
        text-shadow: 0 0 15px rgba(255, 71, 87, 0.8);
        display: flex; justify-content: center; align-items: center; gap: 15px;
    }

    /* 危险闪烁动画 */
    .icon-danger-pulse { animation: danger-pulse 1.5s infinite; }
    @keyframes danger-pulse {
        0% { opacity: 1; text-shadow: 0 0 15px #ff4757; }
        50% { opacity: 0.4; text-shadow: none; }
        100% { opacity: 1; text-shadow: 0 0 15px #ff4757; }
    }

    /* =========================================================
       4. 目标数据展示框 (Data Target)
       ========================================================= */
    .target-data-box {
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 4px solid #ff4757;
        padding: 20px;
        border-radius: 4px;
        font-family: 'Courier New', Courier, monospace;
        margin-bottom: 35px;
    }
    .data-row { margin-bottom: 10px; color: #e0e0e0; line-height: 1.6; }
    .data-row:last-child { margin-bottom: 0; }
    .data-label { color: #00e5ff; font-weight: bold; width: 100px; display: inline-block; }

    /* =========================================================
       5. 决断按钮
       ========================================================= */
    .action-buttons {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .btn-cyber {
        background: transparent;
        border: 1px solid;
        border-radius: 4px;
        padding: 12px 30px;
        font-size: 1.05rem;
        font-weight: 700;
        letter-spacing: 2px;
        transition: all 0.3s;
        text-transform: uppercase;
        cursor: pointer;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-cyber-danger {
        border-color: #ff4757; color: #ff4757; background: linear-gradient(90deg, rgba(255, 71, 87, 0.15), transparent);
    }
    .btn-cyber-danger:hover { background: #ff4757; color: #fff; box-shadow: 0 0 20px #ff4757; }

    .btn-cyber-secondary {
        border-color: #8d99ae; color: #8d99ae; background: linear-gradient(90deg, rgba(141, 153, 174, 0.1), transparent);
    }
    .btn-cyber-secondary:hover { background: #8d99ae; color: #0b132b; box-shadow: 0 0 15px #8d99ae; }
</style>

<div class="delete-container">
    <div class="glass-panel-danger">
        <div class="corner-bl"></div><div class="corner-br"></div>

        <div class="warning-header">
            <h2>
                <i class="fas fa-radiation icon-danger-pulse"></i>
                系统警告：确认数据擦除
                <i class="fas fa-radiation icon-danger-pulse"></i>
            </h2>
            <p style="color: #ffaaaa; font-family: monospace; margin-top: 15px; margin-bottom: 0; font-size: 0.95rem;">
                > [SYS_FATAL] 您正在请求物理擦除底层日志数据，此操作<span style="color: #ff4757; font-weight: bold;">不可逆转</span>。
            </p>
        </div>

        <div class="target-data-box">
            <div class="data-row">
                <span class="data-label">>>> 目标内容:</span>
                <span style="color: #00ff88;">{{ feedback.message }}</span>
            </div>
            <div class="data-row">
                <span class="data-label">>>> 写入时间:</span>
                <span>{{ feedback.created_at|date:"Y-m-d H:i:s" }}</span>
            </div>
            <div class="data-row">
                <span class="data-label">>>> 数据节点:</span>
                <span>FEEDBACK_ID_00{{ feedback.id }}</span>
            </div>
        </div>

        <div class="action-buttons">
            <form method="post" action="{% url 'delete_user_feedback' feedback.id %}" style="margin: 0;">
                {% csrf_token %}
                <button type="submit" class="btn-cyber btn-cyber-danger">
                    <i class="fas fa-skull-crossbones me-2"></i> 授权擦除指令
                </button>
            </form>

            <a href="{% url 'feedback_view' %}" class="btn-cyber btn-cyber-secondary">
                <i class="fas fa-undo-alt me-2"></i> 中止并返回
            </a>
        </div>

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