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

{% block title %}Connector {{ connector.id }} Log{% endblock %}
{% block header %}Connector {{ connector.id }} Log{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <div style="margin-bottom: var(--space-md); font-size: var(--font-size-sm);">
            {% if request.GET.refresh %}
            <a href="{{ request.path }}">Stop auto-refresh</a>
            {% else %}
            <a href="{{ request.path }}?refresh=15">Auto-refresh: 15s</a>
            {% endif %}
        </div>
        {% if log_entries %}
        <div style="margin-bottom: var(--space-md); color: var(--color-text-secondary); font-size: var(--font-size-sm);">
            Last {{ log_entries|length }} log entries, latest first:
        </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);">Logs will appear here once the connector starts generating them.</p>
        </div>
        {% endif %}
        {% if api_log_entries %}
        <h2 class="h5 mt-4 mb-2">API Debug Log:</h2>
        <div style="margin-bottom: var(--space-md); color: var(--color-text-secondary); font-size: var(--font-size-sm);">
            Last {{ api_log_entries|length }} log entries, latest first:
        </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 api_log_entries %}{{ record|format_log_record:formatter|ansi2html|safe }}
{% endfor %}</pre>
        {% 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 %}