CyberPanel/testPlugin/templates/testPlugin/plugin_settings.html

{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% load static %}

{% block title %}{% trans "Test Plugin Settings - CyberPanel" %}{% endblock %}

{% block header_scripts %}
<style>
    .settings-wrapper {
        background: transparent;
        padding: 20px;
    }
    
    .settings-container {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .settings-header {
        background: var(--bg-primary, white);
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
        border: 1px solid var(--border-primary, #e8e9ff);
    }
    
    .settings-form {
        background: var(--bg-primary, white);
        border-radius: 12px;
        padding: 25px;
        box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
        border: 1px solid var(--border-primary, #e8e9ff);
    }
    
    .form-group {
        margin-bottom: 20px;
    }
    
    .form-label {
        display: block;
        font-weight: 600;
        color: var(--text-primary, #2f3640);
        margin-bottom: 8px;
    }
    
    .form-control {
        width: 100%;
        padding: 12px;
        border: 1px solid var(--border-primary, #e8e9ff);
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #5856d6;
        box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #5856d6, #4a90e2);
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(88,86,214,0.3);
    }
    
    .btn-secondary {
        background: #6c757d;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 10px;
    }
    
    .btn-secondary:hover {
        background: #5a6268;
        color: white;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="settings-wrapper">
    <div class="settings-container">
        <!-- Settings Header -->
        <div class="settings-header">
            <h1>
                <i class="fas fa-cog" style="margin-right: 12px; color: #5856d6;"></i>
                {% trans "Test Plugin Settings" %}
            </h1>
            <p>{% trans "Configure your test plugin settings and preferences" %}</p>
        </div>

        <!-- Settings Form -->
        <div class="settings-form">
            <form id="settings-form">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="custom_message" class="form-label">
                        {% trans "Custom Test Message" %}
                    </label>
                    <textarea 
                        id="custom_message" 
                        name="custom_message" 
                        class="form-control" 
                        rows="3"
                        placeholder="Enter your custom message for the test button popup..."
                    >{{ settings.custom_message }}</textarea>
                    <small style="color: var(--text-secondary, #64748b); margin-top: 5px; display: block;">
                        {% trans "This message will be displayed when you click the test button" %}
                    </small>
                </div>
                
                <div class="form-group">
                    <label class="form-label">
                        {% trans "Plugin Status" %}
                    </label>
                    <div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; border: 1px solid var(--border-primary, #e8e9ff);">
                        <strong style="color: {% if settings.plugin_enabled %}#10b981{% else %}#ef4444{% endif %};">
                            {% if settings.plugin_enabled %}
                                <i class="fas fa-check-circle"></i> {% trans "Enabled" %}
                            {% else %}
                                <i class="fas fa-times-circle"></i> {% trans "Disabled" %}
                            {% endif %}
                        </strong>
                        <p style="margin: 8px 0 0 0; color: var(--text-secondary, #64748b); font-size: 14px;">
                            {% trans "Use the toggle switch on the main page to enable/disable the plugin" %}
                        </p>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="form-label">
                        {% trans "Test Statistics" %}
                    </label>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                        <div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; text-align: center;">
                            <div style="font-size: 24px; font-weight: 700; color: #5856d6;">{{ settings.test_count }}</div>
                            <div style="font-size: 14px; color: var(--text-secondary, #64748b);">{% trans "Total Tests" %}</div>
                        </div>
                        <div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; text-align: center;">
                            <div style="font-size: 24px; font-weight: 700; color: #5856d6;">{{ settings.last_test_time|date:"M d" }}</div>
                            <div style="font-size: 14px; color: var(--text-secondary, #64748b);">{% trans "Last Test" %}</div>
                        </div>
                    </div>
                </div>
                
                <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-primary, #e8e9ff);">
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i>
                        {% trans "Save Settings" %}
                    </button>
                    
                    <a href="{% url 'testPlugin:plugin_home' %}" class="btn-secondary">
                        <i class="fas fa-arrow-left"></i>
                        {% trans "Back to Plugin" %}
                    </a>
                    
        <a href="{% url 'testPlugin:plugin_docs' %}" class="btn-secondary">
            <i class="fas fa-book"></i>
            {% trans "Documentation" %}
        </a>
        
        <a href="{% url 'testPlugin:security_info' %}" class="btn-secondary">
            <i class="fas fa-shield-alt"></i>
            {% trans "Security Info" %}
        </a>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('settings-form');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(form);
        const data = {
            custom_message: formData.get('custom_message')
        };
        
        fetch('{% url "testPlugin:update_settings" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 1) {
                showNotification('success', 'Settings Updated', data.message);
            } else {
                showNotification('error', 'Error', data.error_message);
            }
        })
        .catch(error => {
            showNotification('error', 'Error', 'Failed to update settings');
        });
    });
    
    function showNotification(type, title, message) {
        // Create notification element
        const notification = document.createElement('div');
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            border-radius: 8px;
            padding: 16px 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            border-left: 4px solid ${type === 'success' ? '#10b981' : '#ef4444'};
            z-index: 9999;
            max-width: 400px;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        `;
        
        notification.innerHTML = `
            <div style="font-weight: 600; color: var(--text-primary, #2f3640); margin-bottom: 4px;">${title}</div>
            <div style="font-size: 14px; color: var(--text-secondary, #64748b);">${message}</div>
        `;
        
        document.body.appendChild(notification);
        
        // Show notification
        setTimeout(() => notification.style.transform = 'translateX(0)', 100);
        
        // Auto remove after 3 seconds
        setTimeout(() => {
            notification.style.transform = 'translateX(100%)';
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
});
</script>
{% endblock %}