<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>NyRAG</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/static/chat.css?v=11" />
</head>

<body data-deploy-mode="{{ deploy_mode }}">
  <div class="app-container">
    <header class="app-header">
      <!-- Left: Logo & Project Selector -->
      <div class="header-left">
        <div class="logo-group">
          <div class="logo">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
            </svg>
            <h1>NyRAG</h1>
            <span id="deploy-mode-badge" class="deploy-mode-badge"></span>
          </div>

          <div class="project-selector-wrapper" id="project-selector-container">
            <select id="project-selector" class="project-selector">
              <option value="" disabled selected>Select Project</option>
            </select>
          </div>
        </div>
      </div>

      <!-- Right: Actions -->
      <div class="header-right">
        <!-- Stats (Text only) -->
        <span id="corpus-stats" class="corpus-stats header-stats"></span>
        <div id="loading-spinner" class="loading-spinner header-spinner" style="display: none;">
          <div class="spinner"></div>
        </div>

        <div class="header-divider"></div>

        <div class="header-actions-group">
          <label for="config-upload" class="icon-btn" title="Upload Config">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="17 8 12 3 7 8"></polyline>
              <line x1="12" y1="3" x2="12" y2="15"></line>
            </svg>
            <input type="file" id="config-upload" accept=".yml,.yaml" style="display: none;">
          </label>

          <button id="create-new-btn" class="icon-btn" title="New Project">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
          </button>

          <button id="settings-btn" class="icon-btn" title="Settings">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
              stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="3"></circle>
              <path
                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.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-2 2 2 2 0 0 1-2-2v-.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 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.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 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.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 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
              </path>
            </svg>
          </button>
        </div>
      </div>
    </header>

    <main id="chat" class="chat-area" aria-live="polite">
      <!-- Messages will appear here -->
      <div class="welcome-message" id="welcome-message">
        <h2>How can I help you today?</h2>
        <p style="margin-top: 8px; font-size: 14px; opacity: 0.6;">I can help you find information from your documents.
        </p>
      </div>
      
      <!-- No data message - shown when corpus is empty -->
      <div class="no-data-message" id="no-data-message" style="display: none;">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity: 0.5; margin-bottom: 16px;">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
        <h2 id="no-data-title">No data available</h2>
        <p id="no-data-description" style="margin-top: 8px; font-size: 14px; opacity: 0.6;">This project has no indexed documents. Select "+ Create New Project" to feed data.</p>
        <button id="switch-to-feed-btn" class="primary-btn" style="margin-top: 16px;">Feed Data to This Project</button>
      </div>
    </main>
    
    <!-- Feed Panel (inline, not modal) -->
    <div id="feed-panel" class="feed-panel" style="display: none;">
      <div class="feed-panel-content">
        <!-- Example Selector -->
        <div class="feed-toolbar">
          <label for="example-select" class="toolbar-label">Template:</label>
          <select id="example-select" class="example-select">
            <option value="">-- Select a template --</option>
          </select>
        </div>

        <!-- Interactive YAML Config -->
        <div id="interactive-yaml-container" class="interactive-yaml-container">
        </div>

        <!-- Logs / Status -->
        <div class="terminal-container">
          <div class="terminal-header">
            <span class="terminal-title">Terminal Output</span>
            <span id="terminal-status" class="terminal-status">Ready</span>
          </div>
          <div id="terminal-logs" class="terminal-logs"></div>
        </div>
        
        <!-- Action Button -->
        <div class="feed-actions">
          <button id="crawl-action-btn" class="primary-btn">Start Crawl Process</button>
        </div>
      </div>
    </div>

    <footer class="composer-area" id="composer-area">
      <div class="composer-wrapper">
        <textarea id="input" placeholder="Ask anything..." rows="1"></textarea>
        <button id="send" aria-label="Send message">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
            stroke-linecap="round" stroke-linejoin="round">
            <line x1="22" y1="2" x2="11" y2="13"></line>
            <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
          </svg>
        </button>
      </div>
      <div id="active-project-indicator" class="active-project-indicator"></div>
    </footer>
  </div>
  <div id="settings-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>Settings</h2>
        <button class="close-btn">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="hits">Hits (Vespa results)</label>
          <input type="number" id="hits" value="5" min="1" max="50">
        </div>
        <div class="form-group">
          <label for="k">Top-K Chunks (per hit)</label>
          <input type="number" id="k" value="3" min="1" max="20">
        </div>
        <div class="form-group">
          <label for="query_k">Query Variations</label>
          <input type="number" id="query_k" value="3" min="0" max="10">
        </div>
      </div>
      <div class="modal-footer">
        <button id="save-settings" class="primary-btn">Save</button>
      </div>
    </div>
  </div>
  <script src="/static/marked.min.js"></script>
  <script src="/static/purify.min.js"></script>
  <script src="/static/js-yaml.min.js"></script>
  <script src="/static/chat.js?v=14"></script>
</body>

</html>
