{% extends "management/base.html" %}
{% load i18n %}

{% block breadcrumb_items %}
{{ block.super }}
&rsaquo; <a href="{% url 'test-network-connectivity-management' %}">{% translate "Connectivity" %}</a>
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    .row { 
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap; 
    }
    input[type=text] { 
      width: 420px; padding: 8px; 
    }
    button { 
      padding: 8px 12px; cursor: pointer; 
    }
    pre { 
      font-family: monaco,Consolas,Lucida Console,monospace;

      background: #161602; 
      color: #c9ffbe; 
      padding: 12px; 
      height: 420px; 
      overflow: auto; 
      border: 1px solid gray;
      border-radius: 5px;
    }
    .hint { 
      color: #555; font-size: 12px; 
    }
</style>
{% endblock %}

{% block content %}
{{block.super}}

  <h2>{{ title }}</h2>

  <div class="row">
    <input id="target" type="text" placeholder="IP or URL (e.g. 8.8.8.8 or https://example.com)" />
    <button id="start">Ping</button>
    <button id="pinghost">Ping Docker Host ({{ docker_host_target }})</button>
    <button id="stop">Stop</button>
  </div>
  <div class="hint">Streams live via SSE. If behind a proxy, disable buffering.</div>

  <pre id="out"></pre>

  <script>
    let es = null;

    function append(line) {
      const out = document.getElementById("out");
      out.textContent += line + "\n";
      out.scrollTop = out.scrollHeight;
    }

    function stopPing() {
      if (es) { es.close(); es = null; }
    }

    function startPing(params) {
      stopPing();
      document.getElementById("out").textContent = "";
      const url = "{% url 'test-network-connectivity-stream' %}?" + new URLSearchParams(params).toString();
      es = new EventSource(url);

      es.addEventListener("line", (ev) => append(ev.data));
      es.addEventListener("done", (ev) => append(ev.data));
      es.addEventListener("error", () => append("Disconnected."));
    }

    document.getElementById("start").onclick = () => {
      const t = document.getElementById("target").value.trim();
      startPing({ target: t });
    };

    document.getElementById("pinghost").onclick = () => {
      startPing({ quick: "host" });
    };

    document.getElementById("stop").onclick = () => stopPing();
  </script>
{% endblock %}

{% block title %}
{{ title|striptags }}
{% endblock %}