{% extends "base.html" %}
{# Fleet terminal: SSH into fleet devices from the browser. The PC holds each
   shell (fleet_terminal.py); this page long-polls its output and posts keys
   over /api/fleet/term/* -- the same routes the phone app uses. #}
{% block title %}Terminal{% endblock %}
{% block page_id %}terminal{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ aida_rel('static/vendor/xterm/xterm.css') }}">
<style>
  .a-main { max-width: none; }
  .t-layout { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .t-layout > * { min-width: 0; }
  @media (min-width: 1100px) { .t-layout.with-lib { grid-template-columns: minmax(0, 1fr) 340px; } }
  .t-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; align-items: center; }
  .t-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 240px;
    padding: 6px 8px 6px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--bg-2);
    color: var(--muted); cursor: pointer; font: 600 13px var(--font); }
  .t-tab[aria-selected="true"] { border-color: var(--accent); color: var(--text); background: var(--bg-3); }
  .t-tab .t-x { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
  .t-tab .t-x:hover { color: var(--text); background: var(--bg-4); }
  .t-term-card { background: #05101a; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; position: relative; }
  .t-term { height: calc(100dvh - var(--top-h) - 196px); min-height: 260px; }
  .t-term > div { height: 100%; }
  .t-term .xterm { height: 100%; }
  .t-status { position: absolute; right: 12px; top: 10px; z-index: 5; }
  .t-keys { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; scrollbar-width: none; }
  .t-keys::-webkit-scrollbar { display: none; }
  .t-key { flex: none; min-width: 44px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-2);
    background: var(--bg-3); color: var(--text); font: 600 13px var(--mono); cursor: pointer; }
  .t-key[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .t-lib { display: flex; flex-direction: column; max-height: calc(100dvh - var(--top-h) - 60px); }
  .t-lib-list { overflow-y: auto; flex: 1; margin-top: 8px; }
  .t-group { margin: 10px 0 4px; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
  .t-cmd { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: none; color: var(--text);
    border-radius: 8px; padding: 7px 8px; cursor: pointer; }
  .t-cmd:hover, .t-cmd:focus { background: var(--bg-3); border-color: var(--line-2); outline: none; }
  .t-cmd code { display: block; color: #bfe8ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t-cmd small { color: var(--muted); display: block; margin-top: 2px; }
  .t-search { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
  @media (max-width: 1099px) { .t-lib { max-height: 60vh; } }
</style>
{% endblock %}
{% block content %}
{% if missing %}
<div class="a-page-head"><h1><i class="fa-solid fa-terminal" aria-hidden="true"></i> Terminal</h1></div>
<div class="a-banner a-banner--info"><i class="fa-solid fa-circle-info" aria-hidden="true"></i>
  <div class="a-grow">This build of AidaIDE does not have the fleet terminal service yet, so the terminal cannot open here. The desktop's terminal works as before.</div>
</div>
{% else %}
<div class="a-page-head">
  <h1><i class="fa-solid fa-terminal" aria-hidden="true"></i> Terminal</h1>
  <button class="a-btn a-btn--primary" type="button" id="t-new"><i class="fa-solid fa-plus" aria-hidden="true"></i><span>Open a device</span></button>
  <button class="a-btn" type="button" id="t-lib-btn" aria-pressed="false"><i class="fa-solid fa-book" aria-hidden="true"></i><span>Commands</span></button>
  <button class="a-btn a-btn--icon" type="button" id="t-tools" aria-label="Terminal tools"><i class="fa-solid fa-ellipsis-vertical" aria-hidden="true"></i></button>
  <div class="a-sub">The PC signs in to the device and holds the shell, so a session keeps running if this page closes. Sessions end after 30 idle minutes. In the terminal, Tab goes to the shell; F6 moves out of it.</div>
</div>
<div class="t-tabs" id="t-tabs" role="tablist" aria-label="Open terminals"></div>
<div class="t-layout" id="t-layout">
  <div>
    <div class="t-term-card">
      <div class="t-status" id="t-status"></div>
      <div class="t-term" id="t-term-host"></div>
    </div>
    <div class="t-search" id="t-searchbar" hidden>
      <input class="a-input" type="search" id="t-find" placeholder="Find in the output" aria-label="Find in the output">
      <button class="a-btn a-btn--sm a-btn--icon" type="button" id="t-find-prev" aria-label="Previous match"><i class="fa-solid fa-chevron-up" aria-hidden="true"></i></button>
      <button class="a-btn a-btn--sm a-btn--icon" type="button" id="t-find-next" aria-label="Next match"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></button>
      <button class="a-btn a-btn--sm a-btn--ghost a-btn--icon" type="button" id="t-find-close" aria-label="Close search"><i class="fa-solid fa-xmark" aria-hidden="true"></i></button>
    </div>
    <div class="t-keys" id="t-keys" aria-label="Extra keys"></div>
  </div>
  <aside class="a-card t-lib" id="t-lib" hidden aria-label="Command library"></aside>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
{% if not missing %}
{# xterm.js is vendored (static/vendor/xterm, MIT) so the terminal works with no internet. #}
<script src="{{ aida_rel('static/vendor/xterm/xterm.js') }}"></script>
<script src="{{ aida_rel('static/vendor/xterm/xterm-addon-fit.js') }}"></script>
<script src="{{ aida_rel('static/vendor/xterm/xterm-addon-search.js') }}"></script>
<script src="{{ aida_rel('static/js/terminal_page.js') }}"></script>
{% endif %}
{% endblock %}