{% extends "base.html" %}
{% block title %}Pageboy · {{ t('dash.title') }}{% endblock %}
{% block content %}
<p class="lede">{{ th('dash.lede') }}</p>

{# Mostly used once during setup: open until the first hook exists. #}
<details class="panel agent-brief" id="agent-brief-panel" data-agent-brief{% if not hooks %} open{% endif %}>
  <summary class="panel-head">
    <h2>{{ t('dash.brief.title') }}</h2>
    <span class="hint">{{ t('dash.brief.hint') }}</span>
  </summary>
  <p class="prose muted">{{ t('dash.brief.prose') }}</p>
  <div class="actions agent-brief-actions">
    <button
      type="button"
      class="btn primary"
      id="copy-agent-brief"
      data-copy-agent-brief
      data-copied="{{ t('dash.brief.copied') }}"
      data-copy-failed="{{ t('dash.brief.copy_failed') }}"
    >
      {{ t('dash.brief.copy') }}
    </button>
    <a class="btn" href="/ui/agent-brief.txt">{{ t('dash.brief.open_text') }}</a>
    <span class="hint" id="copy-agent-brief-status" aria-live="polite" hidden></span>
  </div>
  <textarea id="agent-brief-source" readonly hidden>{{ agent_brief }}</textarea>
</details>

<section class="panel">
  <div class="panel-head">
    <h2>{{ t('dash.hooks') }}</h2>
  </div>
  <div
    id="hooks"
    hx-get="/ui/partials/hooks"
    hx-trigger="every 5s"
    hx-swap="innerHTML"
  >
    {% include "partials/hooks.html" %}
  </div>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>{{ t('dash.events') }}</h2>
  </div>
  <div
    id="events"
    hx-get="/ui/partials/events"
    hx-trigger="every 5s"
    hx-swap="innerHTML"
  >
    {% include "partials/events.html" %}
  </div>
</section>

<section class="panel">
  <div class="panel-head">
    <h2>{{ t('dash.executions') }}</h2>
  </div>
  <div
    id="executions"
    hx-get="/ui/partials/executions"
    hx-trigger="every 5s"
    hx-swap="innerHTML"
  >
    {% include "partials/executions.html" %}
  </div>
</section>
{% endblock %}

{% block scripts %}
  <script>
    (function () {
      var btn = document.getElementById("copy-agent-brief");
      var source = document.getElementById("agent-brief-source");
      var status = document.getElementById("copy-agent-brief-status");
      if (!btn || !source) return;

      function showStatus(msg) {
        if (!status) return;
        status.hidden = false;
        status.textContent = msg;
      }

      function fallbackCopy(text) {
        var tmp = document.createElement("textarea");
        tmp.value = text;
        tmp.setAttribute("readonly", "");
        tmp.style.position = "fixed";
        tmp.style.left = "-9999px";
        document.body.appendChild(tmp);
        tmp.select();
        var ok = false;
        try {
          ok = document.execCommand("copy");
        } catch (_err) {
          ok = false;
        }
        document.body.removeChild(tmp);
        return ok;
      }

      btn.addEventListener("click", function () {
        var text = source.value;
        if (navigator.clipboard && navigator.clipboard.writeText) {
          navigator.clipboard.writeText(text).then(
            function () {
              showStatus(btn.dataset.copied);
            },
            function () {
              showStatus(fallbackCopy(text) ? btn.dataset.copied : btn.dataset.copyFailed);
            }
          );
          return;
        }
        showStatus(fallbackCopy(text) ? btn.dataset.copied : btn.dataset.copyFailed);
      });
    })();
  </script>
{% endblock %}