{% extends "base.html" %}

{% block title %}System & VPN Logs - Enterprise VPN Hub{% endblock %}

{% block content %}
<div style="margin-bottom: 1.5rem;">
    <h1 style="font-size: 1.6rem; font-weight: 700;">System & VPN Status Logs</h1>
    <p style="color: var(--text-muted); font-size: 0.9rem;">Real-time inspection of WireGuard peers, OpenVPN sessions, and portal audit logs</p>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">WireGuard Live Interface & Peers (wg show)</h2>
    </div>
    <pre class="code-block">{{ wg_output or 'WireGuard interface not active or no peers connected.' }}</pre>
</div>

<div class="card">
    <div class="card-header">
        <h2 class="card-title">Portal Activity & Security Audit Logs</h2>
    </div>

    {% if logs %}
    <div style="overflow-x: auto;">
        <table>
            <thead>
                <tr>
                    <th style="width: 180px;">Timestamp</th>
                    <th style="width: 100px;">Level</th>
                    <th>Message</th>
                </tr>
            </thead>
            <tbody>
                {% for l in logs %}
                <tr>
                    <td style="color: var(--text-muted); font-size: 0.8rem;">{{ l['timestamp'] }}</td>
                    <td>
                        {% if l['level'] == 'ERROR' %}
                            <span class="badge badge-danger">ERROR</span>
                        {% elif l['level'] == 'WARNING' %}
                            <span class="badge badge-warning">WARN</span>
                        {% else %}
                            <span class="badge badge-info">INFO</span>
                        {% endif %}
                    </td>
                    <td style="font-family: monospace; font-size: 0.85rem;">{{ l['message'] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <p style="color: var(--text-muted); text-align: center; padding: 1.5rem;">No log entries yet.</p>
    {% endif %}
</div>
{% endblock %}