<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nterm</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<link rel="stylesheet" href="/static/css/nterm.css">
<style>
  /* Vault overlay — move to nterm.css when ready */
  .vault-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65); z-index: 9000;
    display: flex; align-items: center; justify-content: center;
  }
  .vault-dialog {
    background: var(--bg-panel, #0d1117); border: 1px solid var(--border, #1e2a3a);
    border-radius: 8px; width: 360px; max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  }
  .vault-dialog-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--border, #1e2a3a);
    font-size: 13px; color: var(--cyan, #00d4aa); font-weight: 600;
  }
  .vault-dialog-close {
    background: none; border: none; color: var(--text-dim, #5c7a99);
    cursor: pointer; font-size: 16px; padding: 0 4px;
  }
  .vault-dialog-body { padding: 16px; }
  .vault-dialog-body label {
    display: block; font-size: 11px; color: var(--text-dim, #5c7a99);
    margin-bottom: 4px;
  }
  .vault-dialog-body input {
    width: 100%; box-sizing: border-box;
    background: var(--bg, #0a0e14); color: var(--text, #d4dce8);
    border: 1px solid var(--border, #1e2a3a); border-radius: 4px;
    padding: 8px 10px; font-family: inherit; font-size: 13px;
  }
  .vault-dialog-body input:focus {
    outline: none; border-color: var(--cyan, #00d4aa);
  }
  .vault-dialog-footer { padding: 0 16px 16px; }
  .vault-bar { padding: 6px 16px !important; }
</style>
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
</head>
<body>
<div class="app-container">
  <!-- Title Bar -->
  <div class="title-bar">
    <span class="brand">nterm</span>
    <div class="title-controls">
      <button id="toggle-sidebar" title="Toggle sidebar (Ctrl+B)">☰</button>
      <button id="toggle-diag" title="Toggle diagnostics (Ctrl+`)">Diag</button>
    </div>
    <span class="status-text" id="global-status">No active sessions</span>
  </div>

  <div class="main-area">
    <!-- Sidebar -->
    <div class="sidebar" id="sidebar">
      <div class="sidebar-section">
        <h3>Quick Connect</h3>
        <form id="connect-form" autocomplete="off">
          <div class="form-row">
            <div class="form-group">
              <label>Host</label>
              <input type="text" id="f-host" placeholder="192.168.1.1" required>
            </div>
            <div class="form-group" style="max-width:70px">
              <label>Port</label>
              <input type="number" id="f-port" value="22">
            </div>
          </div>
          <div class="form-group">
            <label>Username</label>
            <input type="text" id="f-username" placeholder="admin">
          </div>
          <div class="form-group">
            <label>Authentication</label>
            <div class="auth-method-tabs" id="auth-tabs">
              <button type="button" data-auth="password" class="active">Password</button>
              <button type="button" data-auth="key_file">Key File</button>
              <button type="button" data-auth="key_paste">Key Paste</button>
              <button type="button" data-auth="vault" id="auth-tab-vault" style="display:none;">🔑 Vault</button>
            </div>
          </div>
          <div class="auth-fields active" id="auth-password">
            <div class="form-group">
              <label>Password</label>
              <input type="password" id="f-password" placeholder="••••••••">
            </div>
          </div>
          <div class="auth-fields" id="auth-key_file">
            <div class="form-group">
              <label>Key File Path (on server)</label>
              <input type="text" id="f-keyfile" placeholder="~/.ssh/id_rsa">
            </div>
            <div class="form-group">
              <label>Key Passphrase (optional)</label>
              <input type="password" id="f-keyfile-pass" placeholder="passphrase">
            </div>
          </div>
          <div class="auth-fields" id="auth-key_paste">
            <div class="form-group">
              <label>Private Key (PEM)</label>
              <textarea id="f-keycontent" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----&#10;...&#10;-----END OPENSSH PRIVATE KEY-----"></textarea>
            </div>
            <div class="form-group">
              <label>Key Passphrase (optional)</label>
              <input type="password" id="f-keycontent-pass" placeholder="passphrase">
            </div>
          </div>
          <div class="auth-fields" id="auth-vault">
            <div id="vault-auth-info" style="font-size:11px;padding:4px 0;color:var(--text-dim);">
              Checking vault...
            </div>
          </div>
          <div class="form-group">
            <label>Vendor Hint</label>
            <select id="f-vendor">
              <option value="">Auto-detect</option>
              <optgroup label="Arista">
                <option value="arista_eos">Arista EOS</option>
              </optgroup>
              <optgroup label="Cisco">
                <option value="cisco_ios">Cisco IOS</option>
                <option value="cisco_nxos">Cisco NX-OS</option>
                <option value="cisco_xr">Cisco IOS-XR</option>
                <option value="cisco_asa">Cisco ASA</option>
                <option value="cisco_wlc">Cisco WLC</option>
              </optgroup>
              <optgroup label="Juniper">
                <option value="juniper_junos">Juniper JunOS</option>
              </optgroup>
              <optgroup label="Palo Alto">
                <option value="paloalto_panos">PAN-OS</option>
              </optgroup>
              <optgroup label="Fortinet">
                <option value="fortinet_fortios">FortiOS</option>
              </optgroup>
              <optgroup label="Linux / Other">
                <option value="linux">Linux</option>
                <option value="hp_comware">HP Comware</option>
                <option value="hp_procurve">HP ProCurve</option>
                <option value="dell_os10">Dell OS10</option>
              </optgroup>
            </select>
          </div>
          <div class="checkbox-group">
            <input type="checkbox" id="f-legacy">
            <label for="f-legacy">Legacy device mode</label>
          </div>
          <button type="submit" class="btn-connect" id="btn-connect">Connect</button>
        </form>
      </div>
      <div class="sidebar-section vault-bar" id="vault-bar" style="display:none;">
        <div style="display:flex;align-items:center;">
          <span id="vault-status" class="vault-indicator" style="font-size:11px;color:var(--text-dim);cursor:pointer;" title="Click to unlock/lock vault">🔒 Vault locked</span>
        </div>
      </div>
      <div class="sidebar-section" id="session-tree-section" style="flex:1;overflow:hidden;display:flex;flex-direction:column;">
        <h3>Sessions</h3>
        <div style="font-size:10px;color:var(--text-dim);padding:8px 0;">
          Loading...
        </div>
      </div>
    </div>

    <!-- Terminal Area -->
    <div class="terminal-area">
      <div class="tab-bar" id="tab-bar"></div>
      <div class="terminal-panels" id="terminal-panels">
        <div class="empty-state" id="empty-state">
          <div class="logo">nterm</div>
          <div class="hint">Connect to a device to begin</div>
        </div>

        <!-- Diagnostics panel -->
        <div class="diag-panel" id="diag-panel">
          <div class="diag-header">
            <div class="diag-tabs">
              <button class="diag-tab active" data-diag="stream">Stream Log</button>
              <button class="diag-tab" data-diag="stats">Session Stats</button>
              <button class="diag-tab" data-diag="sniffer">Lines <span id="diag-line-count"></span></button>
              <button class="diag-tab" data-diag="prompts">Prompts</button>
              <button class="diag-tab" data-diag="blocks">Blocks <span id="diag-block-count"></span></button>
              <button class="diag-tab" data-diag="perf">Perf</button>
            </div>
            <button style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;" onclick="toggleDiag()">✕</button>
          </div>
          <div class="diag-body" id="diag-body">
            <div id="diag-stream" class="diag-view"></div>
            <div id="diag-stats" class="diag-view" style="display:none"></div>
            <div id="diag-sniffer" class="diag-view" style="display:none"></div>
            <div id="diag-prompts" class="diag-view" style="display:none"></div>
            <div id="diag-blocks" class="diag-view" style="display:none"></div>
            <div id="diag-perf" class="diag-view" style="display:none"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Status Bar (with zoom, terminal font, and contrast controls) -->
  <div class="status-bar">
    <span id="status-left">Ready</span>
    <div style="display:flex;align-items:center;gap:6px;margin-left:auto;">
      <!-- UI Scale -->
      <div class="zoom-controls">
        <button id="zoom-out" title="UI scale down (Ctrl+-)">−</button>
        <span id="zoom-indicator" class="zoom-indicator" title="Click to reset">100%</span>
        <button id="zoom-in" title="UI scale up (Ctrl+=)">+</button>
      </div>
      <!-- Terminal Font Size -->
      <div class="zoom-controls" style="border-left:1px solid var(--border);padding-left:6px;">
        <span style="color:var(--text-dim);margin-right:2px;" title="Terminal font size">T:</span>
        <button id="term-font-down" title="Terminal font smaller (Ctrl+Alt+-)">−</button>
        <span id="term-font-indicator" class="zoom-indicator" title="Click to reset to 14px">14px</span>
        <button id="term-font-up" title="Terminal font larger (Ctrl+Alt+=)">+</button>
      </div>
      <!-- Contrast Mode -->
      <button id="contrast-toggle" class="contrast-toggle" title="Cycle contrast mode">◐ Normal</button>
      <span id="status-right">nterm 0.6.0</span>
    </div>
  </div>
</div>

<!-- Vault unlock overlay -->
<div class="vault-overlay" id="vault-overlay" style="display:none;">
  <div class="vault-dialog">
    <div class="vault-dialog-header">
      <span id="vault-dialog-title">Unlock Vault</span>
      <button class="vault-dialog-close" onclick="hideVaultOverlay()">&times;</button>
    </div>
    <div class="vault-dialog-body">
      <div class="form-group">
        <label id="vault-dialog-label">Master password</label>
        <input type="password" id="vault-password" placeholder="••••••••" autocomplete="off">
      </div>
      <div id="vault-dialog-error" style="color:var(--red);font-size:11px;margin-top:4px;display:none;"></div>
    </div>
    <div class="vault-dialog-footer">
      <button id="vault-submit-btn" class="btn-connect" style="width:100%;">Unlock</button>
    </div>
  </div>
</div>

<!-- Toast notification -->
<div class="ctx-toast" id="ctx-toast"></div>

<!-- Scripts: load order matters (dependency chain) -->
<script src="/static/js/zoom.js"></script>
<script src="/static/js/perf.js"></script>
<script src="/static/js/sniffer.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/gutter.js"></script>
<script src="/static/js/diag.js"></script>
<script src="/static/js/context-menu.js"></script>
<script src="/static/js/session.js"></script>
<script src="/static/js/sessions.js"></script>
</body>
</html>