{% extends 'base.html' %}
{% load carconnectivity_filters %}

{% block title %}System Log{% endblock %}
{% block header %}System Log{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        {% if log_entries %}
        <div style="margin-bottom: var(--space-md); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);">
            <span style="color: var(--color-text-secondary); font-size: var(--font-size-sm);">
                Last {{ log_entries|length }} log entries, latest first:
            </span>
            <div style="display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap;">
                <span style="color: var(--color-text-tertiary); font-size: var(--font-size-xs);">Sort:</span>
                <a href="?order=desc{% if request.GET.refresh %}&refresh={{ request.GET.refresh }}{% endif %}" class="btn btn-sm {% if log_order == 'desc' %}btn-primary{% else %}btn-outline{% endif %}" style="padding: 4px 12px; font-size: 13px;">Latest first</a>
                <a href="?order=asc{% if request.GET.refresh %}&refresh={{ request.GET.refresh }}{% endif %}" class="btn btn-sm {% if log_order == 'asc' %}btn-primary{% else %}btn-outline{% endif %}" style="padding: 4px 12px; font-size: 13px;">Oldest first</a>
                {% if request.GET.refresh %}
                <a href="?order={{ log_order }}">Stop auto-refresh</a>
                {% else %}
                <a href="?order={{ log_order }}&refresh=15">Auto-refresh: 15s</a>
                {% endif %}
            </div>
        </div>
        <pre style="background: var(--color-surface-elevated); padding: var(--space-lg); border-radius: var(--border-radius-md); overflow-x: auto; max-height: 600px; font-family: 'SF Mono', Monaco, 'Courier New', monospace; font-size: 13px; line-height: 1.5;">{% for record in log_entries %}{{ record|format_log_record:formatter|ansi2html|safe }}
{% endfor %}</pre>
        {% else %}
        <div style="text-align: center; padding: var(--space-3xl); color: var(--color-text-tertiary);">
            <svg style="width: 64px; height: 64px; margin-bottom: var(--space-md); opacity: 0.5;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
            </svg>
            <p style="font-size: var(--font-size-lg); margin-bottom: var(--space-sm);">No logs available</p>
            <p style="font-size: var(--font-size-sm);">System logs will appear here once the application starts generating them.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
(function(){ var m = location.search.match(/[?&]refresh=(\d+)/); if (m) setInterval(function(){ location.reload(); }, parseInt(m[1],10) * 1000); })();
</script>
{% endblock %}