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

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

{% block content %}
<div class="card">
    <div class="card-body">
        {% if connector.log_storage.storage %}
        <div style="margin-bottom: var(--space-md); color: var(--color-text-secondary); font-size: var(--font-size-sm);">
            Last {{ connector.log_storage.storage|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 connector.log_storage.storage|slice:"::-1" %}{{ 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 %}
    </div>
</div>
{% endblock %}