{{define "app_logs"}}{{template "top" .}}
{{if .Flash}}<p class="banner">{{.Flash}}</p>{{end}}
{{if .FlashErr}}<p class="banner error">{{.FlashErr}}</p>{{end}}
{{template "appnav" .}}
{{template "lognav" .}}

<h2 class="visually-hidden">Logs</h2>
{{if .LogsErr}}<p class="banner error">{{.LogsErr}}</p>{{end}}
<form method="get" class="small" id="logs-filter" data-url="{{.Base}}/apps/{{.AppName}}/logs/data" data-cursor="{{.LogCursor}}" data-follow-error="{{.LogCopy.FollowError}}" data-refreshed="{{.LogCopy.Refreshed}}">
  <label>{{.LogCopy.Instance}}
    <select name="host">
      <option value="">{{.LogCopy.AllInstances}}</option>
      {{range .LogHosts}}<option value="{{.}}"{{if eq . $.LogHost}} selected{{end}}>{{.}}</option>{{end}}
    </select>
  </label>
  <label>Show
    <select name="stream">
      <option value=""{{if eq .LogStream ""}} selected{{end}}>everything</option>
      <option value="app"{{if eq .LogStream "app"}} selected{{end}}>app output</option>
      <option value="platform"{{if eq .LogStream "platform"}} selected{{end}}>platform events</option>
    </select>
  </label>
  <label>from the last
    <select name="since">
      {{if and (ne .LogSince "15m") (ne .LogSince "1h") (ne .LogSince "6h") (ne .LogSince "24h") (ne .LogSince "168h")}}<option value="{{.LogSince}}" selected>{{.LogSince}}</option>{{end}}
      <option value="15m"{{if eq .LogSince "15m"}} selected{{end}}>15 minutes</option>
      <option value="1h"{{if eq .LogSince "1h"}} selected{{end}}>hour</option>
      <option value="6h"{{if eq .LogSince "6h"}} selected{{end}}>6 hours</option>
      <option value="24h"{{if eq .LogSince "24h"}} selected{{end}}>day</option>
      <option value="168h"{{if eq .LogSince "168h"}} selected{{end}}>week</option>
    </select>
  </label>
  <label>{{.LogCopy.AllLevels}}
    <select name="level">
      <option value=""{{if eq .LogLevel ""}} selected{{end}}>{{.LogCopy.AllLevels}}</option>
      <option value="debug"{{if eq .LogLevel "debug"}} selected{{end}}>debug</option>
      <option value="info"{{if eq .LogLevel "info"}} selected{{end}}>info</option>
      <option value="warn"{{if eq .LogLevel "warn"}} selected{{end}}>warn</option>
      <option value="error"{{if eq .LogLevel "error"}} selected{{end}}>error</option>
    </select>
  </label>
  <label>{{.LogCopy.Search}}
    <input type="search" name="text" value="{{.LogGrep}}">
  </label>
  {{if .LogLegacyGrep}}<input type="hidden" name="grep" value="{{.LogLegacyGrep}}">{{end}}
  <button type="submit">Update</button>
  <button type="button" id="log-follow">{{.LogCopy.Follow}}</button>
  <button type="button" id="log-pause" hidden>{{.LogCopy.Pause}}</button>
</form>

{{if .LogTruncated}}<p class="small">Showing the newest {{len .LogRows}} lines of this window — narrow the window, or use <code>carlos logs</code> for more.</p>{{end}}
<div class="term" id="logterm" role="log" aria-label="Log output" tabindex="0" aria-live="polite">
{{- range logLines .LogRows -}}
<div class="tl{{if .Tone}} tl-{{.Tone}}{{end}}"><span class="tl-t">{{.Time}}</span> <span class="tl-s">{{.Stream}}</span>{{if .Host}} <span class="tl-h">{{.Host}}</span>{{end}}  <span class="tl-m">{{.Msg}}</span>{{if .Fields}}<span class="tl-f">{{.Fields}}</span>{{end}}</div>
{{- end -}}
{{if and (not .LogRows) (not .LogsErr)}}<div id="log-empty">No log lines in this window. <a href="{{.LogWidenURL}}">{{.LogCopy.Widen}}</a></div>{{end}}
</div>
<p class="small" id="log-status" aria-live="polite"></p>
{{if .LogRows}}
<p class="small">Times are UTC. Follow live with <code>carlos logs --app {{.AppName}} -f</code>.</p>
{{else if not .LogsErr}}
<p class="small">An app's output appears here shortly after it runs; platform events
(wakes, restarts, failures) appear even when the app itself printed nothing. A
site served from files alone has no app output.</p>
{{end}}
<script>
(function () {
  var form = document.getElementById("logs-filter");
  var term = document.getElementById("logterm");
  var follow = document.getElementById("log-follow");
  var pause = document.getElementById("log-pause");
  var status = document.getElementById("log-status");
  if (!form || !term || !follow || !pause || !status) return;
  var cursor = form.dataset.cursor || "";
  var timer = 0;
  var request = null;
  var fetchTimeout = 0;
  var timedOut = false;
  var following = false;
  var generation = 0;
  var dirty = false;
  var activeQuery = new URLSearchParams(new FormData(form));

  function setFollowing(on) {
    var moveFocus = document.activeElement === (on ? follow : pause);
    following = on;
    follow.hidden = on;
    pause.hidden = !on;
    var q = new URLSearchParams(activeQuery);
    if (on) q.set("follow", "1"); else q.delete("follow");
    history.replaceState(null, "", location.pathname + "?" + q.toString());
    if (moveFocus) (on ? pause : follow).focus();
  }
  function addSpan(row, cls, value, prefix) {
    if (!value) return;
    if (prefix) row.appendChild(document.createTextNode(prefix));
    var span = document.createElement("span");
    span.className = cls;
    span.textContent = value;
    row.appendChild(span);
  }
  function append(line) {
    var empty = document.getElementById("log-empty");
    if (empty) empty.remove();
    var row = document.createElement("div");
    row.className = "tl" + (line.tone ? " tl-" + line.tone : "");
    addSpan(row, "tl-t", line.time, "");
    addSpan(row, "tl-s", line.stream, " ");
    addSpan(row, "tl-h", line.host, " ");
    addSpan(row, "tl-m", line.msg, "  ");
    addSpan(row, "tl-f", line.fields, "");
    term.appendChild(row);
    while (term.querySelectorAll(".tl").length > 200) term.querySelector(".tl").remove();
    term.scrollTop = term.scrollHeight;
  }
  function clearLines() {
    term.querySelectorAll(".tl").forEach(function (row) { row.remove(); });
  }
  function stop() {
    generation++;
    following = false;
    if (timer) window.clearTimeout(timer);
    timer = 0;
    if (request) request.abort();
    request = null;
    if (fetchTimeout) window.clearTimeout(fetchTimeout);
    fetchTimeout = 0;
    timedOut = false;
    term.setAttribute("aria-busy", "false");
    setFollowing(false);
  }
  function poll() {
    if (!following) return;
    var thisGeneration = generation;
    var q = new URLSearchParams(activeQuery);
    var hadCursor = Boolean(cursor);
    q.set("limit", "200");
    if (cursor) {
      q.set("cursor", cursor);
      q.delete("since");
      q.delete("until");
    }
    request = new AbortController();
    timedOut = false;
    var thisRequest = request;
    fetchTimeout = window.setTimeout(function () {
      if (following && thisGeneration === generation && request === thisRequest) {
        timedOut = true;
        thisRequest.abort();
      }
    }, 20000);
    term.setAttribute("aria-busy", "true");
    fetch(form.dataset.url + "?" + q.toString(), {signal: request.signal, headers: {"Accept": "application/json"}})
      .then(function (r) { if (!r.ok) throw new Error(String(r.status)); return r.json(); })
      .then(function (data) {
        if (!following || thisGeneration !== generation) return;
        window.clearTimeout(fetchTimeout);
        fetchTimeout = 0;
        if (data.gap) {
          cursor = "";
          stop();
          status.textContent = form.dataset.followError;
          return;
        }
        if (!hadCursor) clearLines();
        data.lines.forEach(append);
        cursor = data.cursor || cursor;
        status.textContent = form.dataset.refreshed + " " + new Date().toLocaleTimeString();
        term.setAttribute("aria-busy", "false");
        timer = window.setTimeout(poll, 2000);
      })
      .catch(function (err) {
        window.clearTimeout(fetchTimeout);
        fetchTimeout = 0;
        if (err.name === "AbortError" && !timedOut) return;
        if (!following || thisGeneration !== generation) return;
        stop();
        status.textContent = form.dataset.followError;
      });
  }
  form.addEventListener("input", function () { dirty = true; if (following) stop(); });
  form.addEventListener("change", function () { dirty = true; if (following) stop(); });
  follow.addEventListener("click", function () {
    if (dirty) {
      var q = new URLSearchParams(new FormData(form));
      q.set("follow", "1");
      location.assign(location.pathname + "?" + q.toString());
      return;
    }
    setFollowing(true);
    poll();
  });
  pause.addEventListener("click", stop);
  term.scrollTop = term.scrollHeight;
  {{if .LogFollow}}setFollowing(true); poll();{{end}}
})();
</script>
{{template "bottom" .}}{{end}}