{% extends "base.html" %}

{% block title %}接口令牌 · RustDesk 客户端定制平台{% endblock %}
{% block page_class %}page-narrow{% endblock %}

{% block content %}
<div class="page-head">
    <h1 class="page-title">接口令牌（API Token）</h1>
    <p class="page-subtitle">
        通过 JSON API 或 rdgen-cli 命令行提交构建任务时，请在请求头携带令牌：
        <code>Authorization: Token &lt;你的令牌&gt;</code>。请妥善保管，不要泄露给他人。
    </p>
</div>

{% if new_plain_key %}
<div class="alerts">
    <div class="alert alert-success">
        <strong>新令牌已生成，请立即复制保存：</strong>
        <div class="key-box" style="margin-top:10px">
            <span id="newKey">{{ new_plain_key }}</span>
            <button type="button" class="btn btn-secondary btn-sm" onclick="copyKey()">
                <svg class="icon"><use href="#i-copy"/></svg> 复制
            </button>
        </div>
        <div style="margin-top:8px">为保障安全，离开本页后将无法再次查看完整令牌。</div>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header"><svg class="icon"><use href="#i-plus"/></svg> 新建令牌</div>
    <div class="card-body">
        <form method="post" action="{% url 'api_tokens' %}">
            {% csrf_token %}
            <div class="field" style="margin-bottom:0">
                <label for="{{ form.name.id_for_label }}">{{ form.name.label }}</label>
                <div class="input-row">
                    {{ form.name }}
                    <button type="submit" class="btn btn-primary">生成令牌</button>
                </div>
                {% if form.name.help_text %}<div class="field-hint">{{ form.name.help_text }}</div>{% endif %}
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header"><svg class="icon"><use href="#i-key"/></svg> 我的令牌</div>
    {% if tokens %}
    <div class="table-wrap">
        <table class="table">
            <thead>
            <tr>
                <th>名称</th>
                <th>令牌（仅显示前缀）</th>
                <th>状态</th>
                <th>创建时间</th>
                <th>最后使用</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for token in tokens %}
            <tr>
                <td><strong>{{ token.name }}</strong></td>
                <td class="mono text-muted">{{ token.key|slice:":12" }}…</td>
                <td>
                    {% if token.is_active %}
                    <span class="badge badge-success">启用中</span>
                    {% else %}
                    <span class="badge badge-secondary">已停用</span>
                    {% endif %}
                </td>
                <td class="text-muted" style="white-space:nowrap">{{ token.created_at|date:"Y-m-d H:i" }}</td>
                <td class="text-muted" style="white-space:nowrap">
                    {% if token.last_used_at %}{{ token.last_used_at|date:"Y-m-d H:i" }}{% else %}从未使用{% endif %}
                </td>
                <td style="white-space:nowrap">
                    <form method="post" class="inline-form" action="{% url 'delete_token' token.key %}"
                          onsubmit="return confirm('确定删除令牌「{{ token.name|escapejs }}」吗？删除后使用该令牌的程序将立即无法调用接口。');">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-danger btn-sm">
                            <svg class="icon"><use href="#i-trash"/></svg> 删除
                        </button>
                    </form>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-icon"><svg class="icon" style="width:42px;height:42px"><use href="#i-key"/></svg></div>
        <h3>暂无接口令牌</h3>
        <p>当你需要通过命令行或 API 自动提交构建时，在此创建一个令牌。</p>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block head_extra %}
<script>
function copyKey() {
    var text = document.getElementById('newKey').textContent.trim();
    navigator.clipboard.writeText(text).then(function () {
        alert('令牌已复制到剪贴板');
    });
}
</script>
{% endblock %}