{% extends "base.html" %}

{% block title %}Network Logs - {{ task.conversation_id }}{% endblock %}

{% block body_attrs %} class="console-body"{% endblock %}

{% block body %}
<div class="console-page">
    <div class="console-header">
        <span class="console-title">Network: {{ task.conversation_id }}</span>
        <span class="console-subtitle">{{ task.display_title }}</span>
    </div>
    <div id="logs-container"
        {% if is_active %}
        hx-ext="sse"
        sse-connect="/api/conversation/{{ task.conversation_id }}/network/stream?offset={{ network_log_offset }}"
        sse-swap="html"
        hx-swap="beforeend"
        data-poll-url="/api/conversation/{{ task.conversation_id }}/network/poll"
        data-poll-offset="{{ network_log_offset }}"
        {% endif %}
    >
        {{ logs_html|safe }}
    </div>
</div>
{% if is_active %}
<div id="stream-status" class="stream-status">Connecting...</div>
{% endif %}
{% endblock %}

{% block scripts %}
{% if is_active %}
<script src="{{ static_url('vendor/htmx.min.js') }}"></script>
<script src="{{ static_url('vendor/sse.min.js') }}"></script>
<script src="{{ static_url('js/sse-fallback.js') }}"></script>
{% endif %}
<script src="{{ static_url('js/auto-scroll.js') }}"></script>
{% endblock %}