{% extends "admin/change_list.html" %}

{% block body_main %}
<div class="alert alert-warning text-center" style="text-align: center;">
    <p>安全码非常重要，当安全码被泄露时，应该更改新的安全码以确保你的API不会被他人恶意触发。</p>
    <div class="d-flex align-items-center fs-1 fw-bold text-center justify-content-center" style="min-height:6rem">
        
        <span class="me-3">当前安全码：{{ cl.result_list.0.code }}</span>
        <button class="btn btn-primary btn-sm" onclick="copyCode()">
            <i class="bi bi-clipboard"></i> 复制
        </button>
        <a href="refresh/" class="btn btn-secondary btn-sm ms-3 text-white"><i class="bi bi-arrow-clockwise"></i> 重新生成安全码</a>
    </div>
    
</div>

<script>
    function copyCode() {
        const code = "{{ cl.result_list.0.code }}";
        if (!navigator.clipboard) {
            // 备用方案
            const textarea = document.createElement('textarea');
            textarea.value = code;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            new bootstrap.Toast(document.getElementById('copyToast')).show();
        } else {
            navigator.clipboard.writeText(code).then(() => {
                new bootstrap.Toast(document.getElementById('copyToast')).show();
            }).catch(err => {
                console.error("复制失败: ", err);
            });
        }
    }
    
    </script>
    
    <div class="position-fixed bottom-0 end-0 p-3">
        <div id="copyToast" class="toast align-items-center text-white bg-success" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    安全码已复制
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    </div>

{% endblock %}
