{# Managed-listener panel for the IPI tab. Polled by HTMX every ~5s.
   Renders one card per managed listener plus a read-only card for any
   detected foreign listener. Empty state is quiet. #}
<section id="ipi-managed-listener-panel"
         class="guidance-block mb-6"
         hx-get="/api/ipi/managed-listener"
         hx-trigger="every 5s"
         hx-swap="outerHTML">
    <h4 class="text-sm font-semibold uppercase tracking-wider text-base-content/60 mb-3">
        Managed Listener
    </h4>

    {% if not handles and not foreign %}
    <p class="text-sm text-base-content/60">
        No tunneled listener active — enable the tunnel toggle on the launcher to start one.
    </p>
    {% endif %}

    {% for handle in handles %}
    <div class="card bg-base-200 mb-2" data-listener-id="{{ handle.listener_id }}"
         data-state="{{ handle.state }}">
        <div class="card-body p-3">
            <div class="flex items-center gap-2 flex-wrap">
                {% if handle.state == "running" %}
                <span class="badge badge-success badge-sm">running</span>
                {% elif handle.state == "adopted" %}
                <span class="badge badge-info badge-sm">adopted</span>
                {% elif handle.state == "stopping" %}
                <span class="badge badge-warning badge-sm">stopping</span>
                {% elif handle.state == "crashed" %}
                <span class="badge badge-error badge-sm">crashed</span>
                {% else %}
                <span class="badge badge-ghost badge-sm">{{ handle.state }}</span>
                {% endif %}

                {# Scheme allowlist: only render a clickable link for
                   http(s) URLs. Cloudflared output is trusted-but-
                   verify; a poisoned state file publishing a
                   javascript:/data: URL would otherwise become a
                   browser-executable link on operator click. #}
                {% if handle.public_url.startswith(('http://', 'https://')) %}
                <a href="{{ handle.public_url }}" target="_blank" rel="noopener"
                   class="link link-primary truncate">
                    {{ handle.public_url }}
                </a>
                {% else %}
                <code class="truncate">{{ handle.public_url }}</code>
                {% endif %}
                <span class="text-xs text-base-content/60">{{ handle.provider }}</span>
                <span class="text-xs text-base-content/60">pid {{ handle.pid }}</span>
                <span class="text-xs text-base-content/60">since {{ handle.created_at }}</span>
            </div>

            {% if handle.state == "crashed" %}
            <div class="mt-2 text-sm text-error">
                Listener crashed{% if handle.exit_code is not none %} (exit code {{ handle.exit_code }}){% endif %}.
            </div>
            {% endif %}

            {% if handle.state == "adopted" %}
            <p class="text-xs text-base-content/60 mt-2">
                stderr unavailable (listener was adopted from a prior server instance)
            </p>
            {% elif handle.stderr_tail %}
            <details class="collapse collapse-arrow bg-base-100 mt-2">
                <summary class="collapse-title text-xs py-1 min-h-0">Recent stderr</summary>
                <pre class="collapse-content text-xs whitespace-pre-wrap">{% for line in handle.stderr_tail %}{{ line }}
{% endfor %}</pre>
            </details>
            {% endif %}

            <div class="mt-2 flex gap-2">
                {% if handle.state == "crashed" %}
                <button type="button"
                        class="btn btn-xs"
                        hx-post="/api/ipi/managed-listener/stop"
                        hx-vals='{{ {"listener_id": handle.listener_id} | tojson }}'
                        hx-target="#ipi-managed-listener-panel"
                        hx-swap="outerHTML"
                        data-testid="ipi-managed-listener-clear">
                    Clear
                </button>
                {% else %}
                <button type="button"
                        class="btn btn-xs btn-error btn-outline"
                        hx-post="/api/ipi/managed-listener/stop"
                        hx-vals='{{ {"listener_id": handle.listener_id} | tojson }}'
                        hx-target="#ipi-managed-listener-panel"
                        hx-swap="outerHTML"
                        data-testid="ipi-managed-listener-stop">
                    Stop
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}

    {% if foreign %}
    <div class="card bg-warning/10 border border-warning/30" data-testid="ipi-foreign-listener">
        <div class="card-body p-3">
            <div class="flex items-center gap-2 flex-wrap">
                <span class="badge badge-warning badge-sm">external</span>
                <span class="text-sm font-semibold">External listener detected</span>
            </div>
            <div class="mt-1 flex gap-2 flex-wrap text-xs text-base-content/70">
                <span>{{ foreign.public_url }}</span>
                <span>{{ foreign.provider }}</span>
                <span>pid {{ foreign.pid }}</span>
                <span>manager: {{ foreign.manager or "cli" }}</span>
            </div>
        </div>
    </div>
    {% endif %}
</section>