{% extends "base.html" %}

{% block content %}
<div class="card">
    <h2>{{ '编辑配置' if filename else '新增配置' }} {{ filename }}</h2>
    {% if filename and filename.startswith('example-') %}
    <div style="background-color: rgba(255, 165, 0, 0.1); border: 1px solid orange; color: orange; padding: 10px; border-radius: 4px; margin-bottom: 20px;">
        这是一个示例文件，不支持保存修改。
    </div>
    {% endif %}
    <form method="post">
        {% if not filename %}
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px;">配置文件名称 (例如: my_task.yml 或 DMR-mytask.yml)</label>
            <input type="text" name="new_filename" placeholder="DMR-taskname.yml" required>
        </div>
        {% endif %}
        
        <div style="margin-bottom: 20px;">
            <label style="display: block; margin-bottom: 8px;">配置内容 (YAML)</label>
            <textarea name="content" rows="20" style="font-family: 'Consolas', monospace;">{{ content }}</textarea>
        </div>

        <div style="display: flex; gap: 10px;">
            {% if not filename or not filename.startswith('example-') %}
            <button type="submit" name="action" value="save">保存</button>
            {% endif %}
            <button type="button" class="btn-secondary" onclick="checkConfig()">检查格式</button>
            <a href="{{ url_for('config_list') }}"><button type="button" style="background-color: #555; color: white;">取消</button></a>
        </div>
    </form>
    
    <div id="check-result-container" style="display: none; margin-top: 20px; padding: 10px; background-color: #2c2c2c; border-radius: 4px;">
        <h3>检查结果:</h3>
        <pre id="check-result-content"></pre>
    </div>

    <script>
        function checkConfig() {
            const content = document.querySelector('textarea[name="content"]').value;
            const resultContainer = document.getElementById('check-result-container');
            const resultContent = document.getElementById('check-result-content');
            
            resultContainer.style.display = 'none';
            
            fetch('/api/check_config', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({content: content}),
            })
            .then(response => response.json())
            .then(data => {
                resultContainer.style.display = 'block';
                if (data.valid) {
                    resultContent.textContent = data.message;
                    resultContainer.style.backgroundColor = 'rgba(0, 255, 0, 0.1)';
                    resultContainer.style.border = '1px solid #4caf50';
                } else {
                    resultContent.textContent = data.message;
                    resultContainer.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
                    resultContainer.style.border = '1px solid #f44336';
                }
            })
            .catch((error) => {
                console.error('Error:', error);
                resultContainer.style.display = 'block';
                resultContent.textContent = '检查请求失败: ' + error;
                resultContainer.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
            });
        }
    </script>
</div>
{% endblock %}