<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{% block title %}Langfuse Lens{% endblock %}</title>
  <link rel="stylesheet" href="/static/style.css" />
  <script>(function(){var t=localStorage.getItem('lens_theme');if(!t)t=window.matchMedia('(prefers-color-scheme:light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t)})()</script>
  <style>.auth-pending { visibility: hidden; }</style>
  {% block head %}{% endblock %}
</head>
<body class="auth-pending">
  <script>
    // Auth guard — redirect to login if no token
    // Page stays hidden (auth-pending) until token is validated by module script
    (function(){
      if (!localStorage.getItem('lens_token')) {
        window.location.href = '/login?next=' + encodeURIComponent(window.location.pathname);
      }
    })();
  </script>
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
      <svg class="sidebar-logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/><path d="M2 12h20"/></svg>
      <span class="sidebar-title">Langfuse Lens</span>
    </div>

    <nav class="sidebar-nav">
      <a href="/" class="nav-item {% if active_page == 'dashboard' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
        <span data-i18n="nav.dashboard">Dashboard</span>
      </a>
      <a href="/chat" class="nav-item {% if active_page == 'chat' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        <span data-i18n="nav.agentChat">Agent Chat</span>
      </a>

      <div class="nav-section" data-i18n="nav.sectionLangfuse">Langfuse</div>
      <a href="/prompts" class="nav-item {% if active_page == 'prompts' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
        <span data-i18n="nav.prompts">Prompts</span>
      </a>
      <a href="/datasets" class="nav-item {% if active_page == 'datasets' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
        <span data-i18n="nav.datasets">Datasets</span>
      </a>
      <a href="/api-console" class="nav-item {% if active_page == 'api_console' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
        <span data-i18n="nav.apiConsole">API Console</span>
      </a>

      <a href="/reports" class="nav-item {% if active_page == 'reports' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
        <span data-i18n="nav.reports">Reports</span>
      </a>
      <a href="/experiments" class="nav-item {% if active_page == 'experiments' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2z"/><path d="M9 9h6v6H9z"/></svg>
        <span data-i18n="nav.experiments">Experiments</span>
      </a>

      <div class="nav-section" data-i18n="nav.sectionSystem">System</div>
      <a href="/settings" class="nav-item {% if active_page == 'settings' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        <span data-i18n="nav.settings">Settings</span>
      </a>
      <a href="/admin" class="nav-item {% if active_page == 'admin' %}active{% endif %}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        <span data-i18n="nav.admin">Admin</span>
      </a>
    </nav>

    <div class="sidebar-footer">
      <div class="sidebar-user" id="sidebar-user" style="display:none">
        <span id="sidebar-username" class="username-label"></span>
        <button id="logout-btn" class="btn-sm logout-btn" data-i18n="auth.logout">Logout</button>
      </div>
      <span class="version-badge">v0.3.0</span>
    </div>
  </aside>

  <div class="sidebar-overlay" id="sidebar-overlay"></div>
  <div class="main-area">
    <header class="topbar">
      <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle sidebar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
      </button>
      <h1 class="page-title">{% block page_title %}Dashboard{% endblock %}</h1>
      <div class="topbar-right">
        {% block topbar_actions %}{% endblock %}
        <button class="topbar-toggle" id="locale-toggle" aria-label="Toggle language">KO</button>
        <button class="topbar-toggle" id="theme-toggle" aria-label="Toggle theme">
          <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
          <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
        </button>
      </div>
    </header>

    <main class="content">
      {% block content %}{% endblock %}
    </main>
  </div>

  <div class="toast-container" id="toast-container"></div>

  <div class="modal-overlay" id="modal-overlay" hidden>
    <div class="modal" id="modal">
      <div class="modal-header">
        <h2 class="modal-title" id="modal-title"></h2>
        <button class="modal-close" id="modal-close" aria-label="Close">&times;</button>
      </div>
      <div class="modal-body" id="modal-body"></div>
    </div>
  </div>

  <script type="module" src="/static/js/theme.js"></script>
  <script type="module" src="/static/js/api.js"></script>
  <script type="module" src="/static/js/i18n.js"></script>
  <script type="module" src="/static/js/common.js"></script>
  <script type="module">
    import { api } from '/static/js/api.js';
    // Validate token and show page — stays hidden until confirmed
    try {
      const me = await api.get('/api/auth/me');
      if (me && me.ok) {
        document.getElementById('sidebar-username').textContent = me.data.actor;
        document.getElementById('sidebar-user').style.display = '';
      }
      // Token valid (or non-401 error) — reveal page
      document.body.classList.remove('auth-pending');
    } catch(e) {
      // Network error — show page in degraded state
      document.body.classList.remove('auth-pending');
    }
    // Logout handler
    document.getElementById('logout-btn')?.addEventListener('click', async () => {
      try { await api.post('/api/auth/logout'); } catch(e) {}
      localStorage.removeItem('lens_token');
      window.location.href = '/login';
    });
  </script>
  {% block scripts %}{% endblock %}
</body>
</html>
