{% extends "base.html" %}
{% block title %}Document View — KI Context Tool{% endblock %}

{% block head %}
<!-- CodeMirror 6 via CDN (codemirror.net bundles) -->
<script src="https://unpkg.com/codemirror@6.0.1/dist/index.js" type="module" id="cm-loader"></script>
{% endblock %}

{% block content %}
<div class="flex flex-col h-screen overflow-hidden">

  <!-- Topbar -->
  <header class="h-10 border-b border-copilot-border bg-copilot-sidebar flex items-center gap-3 px-4 shrink-0">
    <a href="{{ url_for('main.index') }}"
       class="text-copilot-muted hover:text-copilot-accent transition text-sm flex items-center gap-1">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" d="M15 19l-7-7 7-7"/>
      </svg>
      Back
    </a>
    <span class="text-copilot-border">|</span>
    <span id="doc-name" class="text-sm text-copilot-text truncate flex-1"></span>
  </header>

  <!-- Editor area -->
  <div class="flex-1 overflow-auto relative" id="editor-wrapper">
    <div id="editor-mount" class="h-full font-mono text-sm"></div>

    <!-- Inline chat popup (hidden by default) -->
    <div id="inline-popup"
      class="hidden absolute z-50 w-80 bg-copilot-panel border border-copilot-border rounded-xl shadow-2xl p-3"
      style="top:0;left:0">
      <p class="text-xs text-copilot-muted mb-2 font-semibold">Ask about selection</p>
      <div id="inline-selection-preview"
        class="text-xs text-copilot-muted bg-copilot-bg border border-copilot-border rounded px-2 py-1 mb-2 max-h-20 overflow-y-auto leading-relaxed">
      </div>
      <textarea id="inline-question" rows="2" placeholder="Your question…"
        class="w-full bg-copilot-bg border border-copilot-border rounded-lg px-3 py-2 text-xs text-copilot-text
               focus:outline-none focus:border-copilot-accent resize-none mb-2"></textarea>
      <div class="flex gap-2">
        <button id="inline-submit"
          class="flex-1 bg-copilot-accent hover:bg-copilot-accentHover text-copilot-bg text-xs font-semibold py-1.5 rounded-lg transition">
          Ask
        </button>
        <button id="inline-close"
          class="text-xs text-copilot-muted hover:text-copilot-danger py-1.5 px-2 rounded-lg transition">
          ✕
        </button>
      </div>
      <!-- Answer area -->
      <div id="inline-answer"
        class="hidden mt-3 border-t border-copilot-border pt-3 text-xs text-copilot-text leading-relaxed max-h-48 overflow-y-auto whitespace-pre-wrap">
      </div>
      <p id="inline-loading" class="hidden text-xs text-copilot-muted animate-pulse mt-2">Thinking…</p>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  window.__DOC_ID__ = {{ doc_id }};
</script>
<script src="{{ url_for('static', filename='js/inline_chat.js') }}" type="module"></script>
{% endblock %}