{% extends "admin/change_form.html" %}
{% load static i18n %}

{% block body_main %}

{{ block.super }}

<script>
    django.jQuery(function($) {
        // 文件预览功能增强
        $('.file-preview-btn').on('click', function() {
            const $btn = $(this);
            const path = $btn.data('path');
            const modal = $('#global_commonModal');
            
            // 初始化模态状态
            modal.find('#modalHeader').html(path.split('/').pop());
            modal.find('#modalLoader').show();
            modal.find('#modalMain').hide().empty();
            
            // 优雅显示模态框
            new bootstrap.Modal(modal.get(0), {
                keyboard: false
            }).show();
    
            // 异步加载文件内容
            $.ajax({
                url: `{% url 'sensitive_words_download' %}?path=${encodeURIComponent(path)}`,
                type: 'GET',
                headers: {
                    'X-CSRFToken': $('[name=csrfmiddlewaretoken]').val()
                },
                success: function(data) {
                    // 构建代码预览区块
                    const $pre = $('<pre>').addClass('bg-dark text-light p-3 rounded').text(data);
                    const $copyBtn = $(
                        '<button class="btn btn-sm btn-outline-light mt-3 copy-trigger">' +
                        '<i class="fas fa-copy me-2"></i>一键复制</button>'
                    ).attr('data-clipboard-text', data);
                    
                    // 动态注入内容
                    modal.find('#modalMain')
                        .html($pre)
                        .append($copyBtn)
                        .fadeIn(500);
                    
                    // 隐藏加载状态
                    modal.find('#modalLoader').slideUp();
                    
                    // 初始化复制功能
                    new ClipboardJS('.copy-trigger', {
                        container: modal.get(0)
                    }).on('success', function(e) {
                        e.trigger.innerHTML = '<i class="fas fa-check-circle me-2"></i>已复制!';
                        setTimeout(() => {
                            e.trigger.innerHTML = '<i class="fas fa-copy me-2"></i>再次复制';
                        }, 2000);
                    });
                },
                error: function(xhr) {
                    // 错误处理优化
                    const errorMsg = `${xhr.status} ${xhr.statusText}`;
                    const $alert = $(
                        '<div class="alert alert-danger d-flex align-items-center">' +
                        '<i class="fas fa-exclamation-triangle fa-2x me-3"></i>' +
                        '<div>' +
                        '<h5 class="alert-heading mb-2">内容加载失败</h5>' +
                        `<p class="mb-0">${errorMsg}</p>` +
                        '</div></div>'
                    );
                    
                    modal.find('#modalMain')
                        .html($alert)
                        .fadeIn(500);
                    modal.find('#modalLoader').slideUp();
                }
            });
        });
    });
    
</script>
{% endblock %}
