<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Logs - System Operations</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: Arial, sans-serif;
        }
        h1 {
            text-align: center;
            color: #343a40;
        }
        .table-container {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        .table {
            margin-bottom: 0;
            table-layout: fixed;
            width: 100%;
        }
        .table th, .table td {
            text-align: center;
            word-wrap: break-word;
        }
        .table th:nth-child(1), .table td:nth-child(1) {
            width: 15%; /* Hostname column */
        }
        .table th:nth-child(2), .table td:nth-child(2) {
            width: 15%; /* Device IP column */
        }
        .table th:nth-child(3), .table td:nth-child(3) {
            width: 15%; /* Operation Type column */
        }
        .table th:nth-child(4), .table td:nth-child(4) {
            width: 20%; /* Timestamp column */
        }
        .table th:nth-child(5), .table td:nth-child(5) {
            width: 35%; /* Event Description column */
        }
        .refresh-timer {
            text-align: center;
            margin-bottom: 10px;
            font-size: 1.2rem;
            color: #343a40;
        }
        .server-log-header {
            background: linear-gradient(135deg, #dc3545, #6c757d);
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .server-badge {
            background-color: #dc3545;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
        }
        .operation-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: bold;
        }
        .operation-system { background-color: #6c757d; color: white; }
        .operation-auto_update { background-color: #ffc107; color: black; }
        .operation-command { background-color: #0d6efd; color: white; }
        .operation-reset { background-color: #dc3545; color: white; }
        .stats-row {
            background-color: #f8f9fa;
            border: 2px solid #dee2e6;
        }
    </style>
    <script>
        // Countdown timer for refresh
        let countdown = 30;
        function updateTimer() {
            document.getElementById('refresh-timer').innerText = countdown;
            countdown--;
            if (countdown < 0) {
                location.reload();
            }
        }
        setInterval(updateTimer, 1000);

        // Function to get operation type from description
        function getOperationType(description) {
            if (description.toLowerCase().includes('auto-update') || description.toLowerCase().includes('auto_update')) {
                return 'auto_update';
            } else if (description.toLowerCase().includes('command')) {
                return 'command';
            } else if (description.toLowerCase().includes('reset') || description.toLowerCase().includes('clear')) {
                return 'reset';
            } else {
                return 'system';
            }
        }

        // Apply operation badges after page load
        document.addEventListener('DOMContentLoaded', function() {
            const rows = document.querySelectorAll('tbody tr:not(.stats-row)');
            rows.forEach(row => {
                const descCell = row.cells[4];
                const operationCell = row.cells[2];
                const description = descCell.textContent;
                const operationType = getOperationType(description);
                
                operationCell.innerHTML = `<span class="operation-badge operation-${operationType}">${operationType.toUpperCase().replace('_', '-')}</span>`;
            });
        });
    </script>
</head>
<body>
    <div class="container mt-5">
        <div class="server-log-header text-center">
            <h1 class="mb-2">
                <i class="fas fa-server"></i> Server Operations Log
            </h1>
            <p class="mb-0">System operations, auto-updates, database resets, and server commands</p>
        </div>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="refresh-timer">
                <i class="fas fa-clock"></i> Auto-refresh: <span id="refresh-timer">30</span> seconds
            </div>
            <div>
                <a href="/dashboard" class="btn btn-primary">
                    <i class="fas fa-tachometer-alt"></i> Dashboard
                </a>
                <a href="/device_management" class="btn btn-success">
                    <i class="fas fa-cogs"></i> Device Management
                </a>
                <a href="/unique_devices" class="btn btn-secondary">
                    <i class="fas fa-list"></i> Unique Devices
                </a>
            </div>
        </div>

        <div class="table-container">
            {% if logs %}
            <!-- Statistics Row -->
            <div class="mb-3 p-3 stats-row rounded">
                <div class="row text-center">
                    <div class="col-md-3">
                        <h5 class="text-primary">{{ logs|length }}</h5>
                        <small>Total Operations</small>
                    </div>
                    <div class="col-md-3">
                        <h5 class="text-success">
                            {% set system_ops = logs|selectattr('2', 'equalto', 'SYSTEM')|list|length %}
                            {{ system_ops }}
                        </h5>
                        <small>System Operations</small>
                    </div>
                    <div class="col-md-3">
                        <h5 class="text-warning">
                            {% set auto_updates = 0 %}
                            {% for log in logs %}
                                {% if 'auto' in log[4]|lower or 'update' in log[4]|lower %}
                                    {% set auto_updates = auto_updates + 1 %}
                                {% endif %}
                            {% endfor %}
                            {{ auto_updates }}
                        </h5>
                        <small>Auto-Updates</small>
                    </div>
                    <div class="col-md-3">
                        <h5 class="text-danger">
                            {% set resets = 0 %}
                            {% for log in logs %}
                                {% if 'reset' in log[4]|lower or 'clear' in log[4]|lower %}
                                    {% set resets = resets + 1 %}
                                {% endif %}
                            {% endfor %}
                            {{ resets }}
                        </h5>
                        <small>Database Resets</small>
                    </div>
                </div>
            </div>

            <table class="table table-striped table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th><i class="fas fa-server"></i> Source</th>
                        <th><i class="fas fa-network-wired"></i> IP Address</th>
                        <th><i class="fas fa-cog"></i> Operation</th>
                        <th><i class="fas fa-clock"></i> Timestamp</th>
                        <th><i class="fas fa-info-circle"></i> Description</th>
                    </tr>
                </thead>
                <tbody>
                    {% for log in logs %}
                    <tr>
                        <td><span class="server-badge">{{ log[0] }}</span></td>
                        <td>{{ log[1] }}</td>
                        <td>{{ log[2] }}</td>
                        <td>{{ log[3] }}</td>
                        <td class="text-start">{{ log[4] }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                <h4 class="text-muted">No Server Operations Found</h4>
                <p class="text-muted">No server operations have been logged yet.</p>
                <a href="/dashboard" class="btn btn-primary">
                    <i class="fas fa-arrow-left"></i> Back to Dashboard
                </a>
            </div>
            {% endif %}
        </div>
    </div>
    
    <footer>
        <p class="text-center mt-4">&copy; 2025 Server Operations Dashboard. All rights reserved.</p>
    </footer>
</body>
</html>
