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

{% block title %}操作员档案 - 个人中心{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 页面布局与毛玻璃面板
       ========================================================= */
    .profile-container {
        max-width: 1100px;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .glass-panel {
        background: rgba(28, 37, 65, 0.6);
        border: 1px solid rgba(0, 229, 255, 0.2);
        border-radius: 12px;
        padding: 30px 40px;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 229, 255, 0.05);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        margin-bottom: 30px;
        position: relative;
    }

    /* 面板发光角 */
    .glass-panel::before, .glass-panel::after { content: ''; position: absolute; width: 20px; height: 20px; border: 2px solid #00e5ff; }
    .glass-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
    .glass-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

    /* =========================================================
       2. 标题特调
       ========================================================= */
    .cyber-panel-header {
        display: flex; justify-content: space-between; align-items: center;
        border-bottom: 1px dashed rgba(0, 229, 255, 0.3);
        padding-bottom: 15px; margin-bottom: 30px;
    }
    .cyber-panel-header h2 {
        color: #fff; font-weight: 800; letter-spacing: 3px; margin: 0;
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    .cyber-panel-header i { color: #00e5ff; margin-right: 15px; }

    /* =========================================================
       3. 个人信息 HUD 数据块 (HUD Data Points)
       ========================================================= */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }
    .info-item {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-left: 4px solid #00e5ff;
        border-radius: 4px;
        padding: 15px 20px;
        transition: all 0.3s ease;
    }
    .info-item:hover {
        background: rgba(0, 229, 255, 0.08);
        border-color: rgba(0, 229, 255, 0.3);
        box-shadow: inset 0 0 15px rgba(0, 229, 255, 0.1);
        transform: translateX(5px);
    }
    .info-label {
        color: #8d99ae; font-size: 0.85rem; text-transform: uppercase;
        letter-spacing: 1px; margin-bottom: 5px;
    }
    .info-value {
        color: #fff; font-size: 1.2rem; font-family: 'Courier New', Courier, monospace;
        text-shadow: 0 0 5px rgba(0, 229, 255, 0.4); font-weight: bold;
    }

    /* =========================================================
       4. 极客按钮
       ========================================================= */
    .btn-cyber {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), transparent);
        border: 1px solid #00e5ff; color: #00e5ff; border-radius: 4px;
        padding: 10px 25px; font-size: 0.95rem; font-weight: 600;
        letter-spacing: 2px; transition: all 0.3s; text-decoration: none;
        display: inline-block; text-transform: uppercase;
    }
    .btn-cyber:hover { background: #00e5ff; color: #0b132b; box-shadow: 0 0 15px #00e5ff; transform: translateY(-2px); }

    .btn-cyber-warning { border-color: #ffaa00; color: #ffaa00; background: linear-gradient(90deg, rgba(255, 170, 0, 0.1), transparent); }
    .btn-cyber-warning:hover { background: #ffaa00; color: #0b132b; box-shadow: 0 0 15px #ffaa00; }

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

    /* =========================================================
       5. 科幻数据栅格 (Cyber Table - 继承模型库风格)
       ========================================================= */
    .cyber-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; color: #e0e0e0; }
    .cyber-table thead th {
        color: #00e5ff; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
        padding: 12px 15px; border: none; background: rgba(0, 229, 255, 0.05);
        border-top: 1px solid rgba(0, 229, 255, 0.3); border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    }
    .cyber-table thead th:first-child { border-left: 1px solid rgba(0, 229, 255, 0.3); border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
    .cyber-table thead th:last-child { border-right: 1px solid rgba(0, 229, 255, 0.3); border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

    .cyber-table tbody tr { background: rgba(28, 37, 65, 0.5); transition: all 0.3s ease; box-shadow: inset 0 0 10px rgba(0,0,0,0.5); }
    .cyber-table tbody td { padding: 15px; vertical-align: middle; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); }
    .cyber-table tbody td:first-child { border-left: 1px solid rgba(255,255,255,0.05); }
    .cyber-table tbody td:last-child { border-right: 1px solid rgba(255,255,255,0.05); }
    .cyber-table tbody tr:hover { background: rgba(0, 229, 255, 0.08); transform: scale(1.01); }
    .cyber-table tbody tr:hover td { border-color: rgba(0, 229, 255, 0.4); }

    .model-name { font-weight: bold; color: #fff; font-size: 1.05rem; letter-spacing: 1px; }
    .empty-state { padding: 40px 20px; text-align: center; color: #8d99ae; border: 1px dashed rgba(255,255,255,0.2); border-radius: 8px; background: rgba(0,0,0,0.2); }
</style>

<div class="profile-container">

    <div class="glass-panel">
        <div class="cyber-panel-header">
            <h2><i class="fas fa-id-badge"></i> 操作员档案 (Operator Profile)</h2>
            <span style="color: #00ff88; font-family: monospace; border: 1px solid #00ff88; padding: 3px 10px; border-radius: 15px; font-size: 0.85rem;">
                <i class="fas fa-circle me-1" style="font-size: 0.6em; animation: blinker 2s linear infinite;"></i> STATUS: ONLINE
            </span>
        </div>

        <div class="info-grid">
            <div class="info-item">
                <div class="info-label"><i class="fas fa-user-circle me-1"></i> 系统标识 (Username)</div>
                <div class="info-value">{{ user.username }}</div>
            </div>
            <div class="info-item">
                <div class="info-label"><i class="fas fa-signature me-1"></i> 指挥官代号 (Nickname)</div>
                <div class="info-value">{{ user.first_name|default:"[未登记]" }}</div>
            </div>
            <div class="info-item">
                <div class="info-label"><i class="fas fa-envelope me-1"></i> 加密通讯链路 (Email)</div>
                <div class="info-value">{{ user.email|default:"[未绑定]" }}</div>
            </div>
            <div class="info-item">
                <div class="info-label"><i class="fas fa-clock me-1"></i> 权限激活时间 (Date Joined)</div>
                <div class="info-value">{{ user.date_joined|date:"Y-m-d H:i" }}</div>
            </div>
            <div class="info-item" style="border-left-color: #ffaa00;">
                <div class="info-label"><i class="fas fa-sign-in-alt me-1"></i> 上次接入终端 (Last Login)</div>
                <div class="info-value" style="text-shadow: 0 0 5px rgba(255, 170, 0, 0.4);">{{ user.last_login|date:"Y-m-d H:i" }}</div>
            </div>
            <div class="info-item" style="border-left-color: #00ff88; grid-column: 1 / -1;">
                <div class="info-label"><i class="fas fa-key me-1"></i> 边缘节点通信秘钥 (API Key)</div>
                <div class="info-value" style="color: #00ff88; font-size: 1.1rem; user-select: all; cursor: pointer;" title="双击复制">
                    {{ api_key }}
                </div>
                <div style="font-size: 0.8rem; color: #8d99ae; margin-top: 5px;">
                    <i class="fas fa-info-circle"></i> 请将此秘钥填入边缘端 federated_client.py 的 --api-key 参数中以接入星图
                </div>
            </div>
        </div>

        <div class="mt-4 pt-3" style="border-top: 1px solid rgba(255,255,255,0.1);">
            <a href="{% url 'update_profile' %}" class="btn-cyber me-3"><i class="fas fa-user-edit me-2"></i> 更新档案信息</a>
            <a href="{% url 'change_password' %}" class="btn-cyber btn-cyber-warning"><i class="fas fa-key me-2"></i> 重置安全密钥</a>
        </div>
    </div>

    <div class="glass-panel">
        <div class="cyber-panel-header">
            <h2><i class="fas fa-server"></i> 专属算力节点 (Deployed Nodes)</h2>
        </div>

        {% if models %}
            <div class="table-responsive">
                <table class="cyber-table">
                    <thead>
                        <tr>
                            <th>节点名称 (Name)</th>
                            <th>架构描述 (Description)</th>
                            <th>挂载时间 (Timestamp)</th>
                            <th class="text-center">权重流 (File)</th>
                            <th class="text-center">指令覆盖 (Operations)</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for model in models %}
                        <tr>
                            <td><div class="model-name"><i class="fas fa-network-wired me-2" style="color: #00e5ff; font-size: 0.9em;"></i>{{ model.name }}</div></td>
                            <td style="color: #a0aab5; max-width: 250px;">{{ model.description }}</td>
                            <td style="color: #8d99ae; font-family: monospace;">{{ model.uploaded_at|date:"Y-m-d H:i" }}</td>
                            <td class="text-center">
                                <a href="{{ model.model_file.url }}" class="btn-cyber" style="padding: 5px 15px; font-size: 0.85rem;"><i class="fas fa-download"></i> 下载</a>
                            </td>
                            <td class="text-center">
                                <a href="{% url 'edit_model' model.id %}" class="btn-cyber btn-cyber-warning" style="padding: 5px 15px; font-size: 0.85rem;"><i class="fas fa-edit"></i> 编辑</a>
                                <a href="{% url 'delete_model' model.id %}" class="btn-cyber btn-cyber-danger" style="padding: 5px 15px; font-size: 0.85rem;"
                                   onclick="return confirm('⚠️ 警告：切断此节点的连接不可逆转。确认删除该模型？')"><i class="fas fa-trash-alt"></i> 销毁</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">
                <i class="fas fa-satellite-dish fa-3x mb-3" style="color: #4a5568;"></i>
                <h5 style="color: #a0aab5;">操作员尚未挂载任何独立计算节点</h5>
                <p>请前往 [模型军械库] 上传您的专属网络权重。</p>
            </div>
        {% endif %}
    </div>

</div>

<style>
    @keyframes blinker { 50% { opacity: 0; } }
</style>
{% endblock %}