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

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

{% block header_scripts %}
<style>
    .logs-wrapper {
        background: transparent;
        padding: 20px;
    }
    
    .logs-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .logs-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);
    }
    
    .logs-content {
        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);
    }
    
    .logs-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    
    .logs-table th,
    .logs-table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-primary, #e8e9ff);
    }
    
    .logs-table th {
        background: var(--bg-secondary, #f8f9ff);
        font-weight: 600;
        color: var(--text-primary, #2f3640);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .logs-table td {
        font-size: 14px;
        color: var(--text-secondary, #64748b);
    }
    
    .log-action {
        font-weight: 600;
        color: var(--text-primary, #2f3640);
    }
    
    .log-timestamp {
        color: var(--text-tertiary, #9ca3af);
        font-size: 13px;
    }
    
    .log-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        margin-right: 8px;
    }
    
    .log-icon.info {
        background: #e3f2fd;
        color: #1976d2;
    }
    
    .log-icon.success {
        background: #e8f5e8;
        color: #388e3c;
    }
    
    .log-icon.warning {
        background: #fff3e0;
        color: #f57c00;
    }
    
    .log-icon.error {
        background: #ffebee;
        color: #d32f2f;
    }
    
    .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;
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary, #64748b);
    }
    
    .empty-state i {
        font-size: 64px;
        margin-bottom: 20px;
        opacity: 0.5;
    }
    
    .empty-state h3 {
        font-size: 24px;
        margin-bottom: 10px;
        color: var(--text-primary, #2f3640);
    }
    
    .empty-state p {
        font-size: 16px;
        margin: 0;
    }
    
    .filter-controls {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
        align-items: center;
    }
    
    .filter-select {
        padding: 8px 12px;
        border: 1px solid var(--border-primary, #e8e9ff);
        border-radius: 6px;
        background: white;
        font-size: 14px;
    }
    
    .filter-select:focus {
        outline: none;
        border-color: #5856d6;
        box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
    }
    
    @media (max-width: 768px) {
        .logs-table {
            font-size: 12px;
        }
        
        .logs-table th,
        .logs-table td {
            padding: 8px;
        }
        
        .filter-controls {
            flex-direction: column;
            align-items: stretch;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="logs-wrapper">
    <div class="logs-container">
        <!-- Logs Header -->
        <div class="logs-header">
            <h1>
                <i class="fas fa-list" style="margin-right: 12px; color: #5856d6;"></i>
                {% trans "Test Plugin Logs" %}
            </h1>
            <p>{% trans "View detailed activity logs for the test plugin" %}</p>
        </div>

        <!-- Logs Content -->
        <div class="logs-content">
            <div class="filter-controls">
                <select class="filter-select" id="action-filter" title="{% trans 'Filter logs by action type' %}">
                    <option value="">{% trans "All Actions" %}</option>
                    <option value="test_button_click">{% trans "Test Button Clicks" %}</option>
                    <option value="plugin_toggle">{% trans "Plugin Toggle" %}</option>
                    <option value="settings_update">{% trans "Settings Update" %}</option>
                    <option value="page_visit">{% trans "Page Visits" %}</option>
                </select>
                
                <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>
            </div>
            
            {% if logs %}
            <table class="logs-table">
                <thead>
                    <tr>
                        <th>{% trans "Action" %}</th>
                        <th>{% trans "Message" %}</th>
                        <th>{% trans "Timestamp" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                    <tr class="log-row" data-action="{{ log.action }}">
                        <td>
                            <span class="log-icon {% if 'error' in log.action %}error{% elif 'success' in log.action or 'click' in log.action %}success{% elif 'warning' in log.action %}warning{% else %}info{% endif %}">
                                {% if 'click' in log.action %}
                                    <i class="fas fa-mouse-pointer"></i>
                                {% elif 'toggle' in log.action %}
                                    <i class="fas fa-toggle-on"></i>
                                {% elif 'settings' in log.action %}
                                    <i class="fas fa-cog"></i>
                                {% elif 'visit' in log.action %}
                                    <i class="fas fa-eye"></i>
                                {% else %}
                                    <i class="fas fa-info-circle"></i>
                                {% endif %}
                            </span>
                            <span class="log-action">{{ log.action|title|replace:"_":" " }}</span>
                        </td>
                        <td>{{ log.message }}</td>
                        <td class="log-timestamp">{{ log.timestamp|date:"M d, Y H:i:s" }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <h3>{% trans "No Logs Found" %}</h3>
                <p>{% trans "No activity logs available yet. Start using the plugin to see logs here." %}</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const actionFilter = document.getElementById('action-filter');
    const logRows = document.querySelectorAll('.log-row');
    
    actionFilter.addEventListener('change', function() {
        const selectedAction = this.value;
        
        logRows.forEach(row => {
            if (selectedAction === '' || row.dataset.action === selectedAction) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
});
</script>
{% endblock %}