{% extends "base.html" %}

{% block title %}配置文件管理 · RustDesk 客户端定制平台{% endblock %}

{% block content %}
<nav class="breadcrumb">
    <a href="{% url 'generator' %}">客户端定制</a>
    <span class="breadcrumb-sep">/</span>
    <span>配置文件管理</span>
</nav>

<div class="page-head">
    <h1 class="page-title">
        <svg class="icon"><use href="#i-save"/></svg>
        构建配置文件
    </h1>
    <p class="page-subtitle">
        在客户端定制页可把当前表单「另存为方案」，方案与你的账号绑定，下次直接选择即可创建构建任务；
        也可以在此导出为 JSON 文件备份/迁移，或从 JSON 文件导入。
    </p>
</div>

<div class="card">
    <div class="card-header"><svg class="icon"><use href="#i-file-up"/></svg> 从 JSON 文件导入</div>
    <div class="card-body">
        <form method="post" action="{% url 'saved_configs' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="grid-2">
                <div class="field">
                    <label for="id_name">方案名称</label>
                    <input type="text" name="name" id="id_name" maxlength="100" class="form-control"
                           placeholder="留空则使用文件名">
                    <div class="field-hint">同一账号下方案名称不可重复。</div>
                </div>
                <div class="field">
                    <label for="id_config_file">配置文件</label>
                    <input type="file" name="config_file" id="id_config_file"
                           accept=".json,application/json" hidden>
                    <div class="file-pick-row">
                        <label for="id_config_file" class="btn btn-secondary">
                            <svg class="icon"><use href="#i-file-up"/></svg> 选择文件
                        </label>
                        <span id="configFileName" class="file-pick-name">未选择任何文件</span>
                    </div>
                    <div class="field-hint">支持本平台导出的配置文件，也兼容 rdgen-cli 使用的 JSON 参数。</div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary">
                <svg class="icon"><use href="#i-file-up"/></svg> 导入为配置方案
            </button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header"><svg class="icon"><use href="#i-list"/></svg> 我的配置方案（{{ configs|length }}）</div>
    {% if configs %}
    <div class="table-wrap">
        <table class="table">
            <thead>
            <tr>
                <th>方案名称</th>
                <th>目标平台</th>
                <th>版本</th>
                <th>更新时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for cfg in configs %}
            <tr>
                <td><strong>{{ cfg.name }}</strong></td>
                <td>{{ cfg.platform_label }}</td>
                <td class="mono">{{ cfg.version_label }}</td>
                <td class="text-muted" style="white-space:nowrap">{{ cfg.updated_at|date:"Y-m-d H:i" }}</td>
                <td style="white-space:nowrap">
                    <a class="btn btn-secondary btn-sm" href="{% url 'generator' %}?config={{ cfg.id }}">
                        <svg class="icon"><use href="#i-zap"/></svg> 载入并构建
                    </a>
                    <a class="btn btn-secondary btn-sm" href="{% url 'export_config' cfg.id %}">
                        <svg class="icon"><use href="#i-file-down"/></svg> 导出
                    </a>
                    <form method="post" class="inline-form" action="{% url 'delete_config' cfg.id %}"
                          onsubmit="return confirm('确定删除配置方案「{{ cfg.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-save"/></svg></div>
        <h3>暂无保存的配置方案</h3>
        <p>在「客户端定制」页填好配置后点击「另存为方案」，下次即可一键载入，无需重复填写。</p>
        <a class="btn btn-primary" href="{% url 'generator' %}">
            <svg class="icon"><use href="#i-zap"/></svg> 去定制页创建方案
        </a>
    </div>
    {% endif %}
</div>

<div class="card">
    <div class="card-header"><svg class="icon"><use href="#i-shield"/></svg> 说明</div>
    <div class="card-body">
        <ul class="config-check-list">
            <li class="is-warn"><svg class="icon"><use href="#i-alert"/></svg> 方案内容包含「固定访问密码」等字段，仅自己可见，请勿把导出的 JSON 随意分享给他人。</li>
            <li class="is-ok"><svg class="icon"><use href="#i-check-circle"/></svg> 应用图标 / Logo / 隐私屏图片会以 base64 内嵌在方案中，无需重新上传。</li>
            <li class="is-ok"><svg class="icon"><use href="#i-check-circle"/></svg> 导出的 JSON 与定制页「导出配置为 JSON」格式一致，也可直接用于 rdgen-cli 命令行构建。</li>
        </ul>
    </div>
</div>

<script>
document.getElementById('id_config_file').addEventListener('change', function () {
    document.getElementById('configFileName').textContent =
        this.files.length ? this.files[0].name : '未选择任何文件';
});
</script>
{% endblock %}