{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.css" />
<style>
  #content img {
    max-width: 100%;
    height: auto;
  }
  .pdfjs-frame {
    width: 100%;
    height: 100%;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    flex: 1;
  }
  .split-layout {
    display: flex;
    gap: 12px;
    width: 100%;
    max-width: var(--split-max-width, 100%);
    margin: 0 auto;
    flex: 1;
    min-height: 440px;
  }
  .split-pane {
    flex: 1;
    border: 1px solid #d0d7de;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .split-pane iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }
  @media (max-width: 900px) {
    .split-layout {
      flex-direction: column;
      min-height: 0;
    }
    .split-pane {
      height: 70vh;
    }
  }
</style>
{% endblock %}

{% block content %}
<div class="detail-shell">
  {# Toolbar #}
  {% if not embed %}
  <div class="detail-toolbar">
    <div class="tabs">
      {% for label, view in tabs %}
      <a class="tab inline-flex items-center rounded-full border px-3 py-1.5 text-sm shadow-sm{% if current_view == view %} border-slate-900 bg-slate-900 text-white{% else %} border-slate-200 bg-white text-slate-700 hover:bg-slate-50{% endif %}" href="{{ view_hrefs[view] }}">{{ label }}</a>
      {% endfor %}
    </div>
    <div class="toolbar-actions">
      {# Template select controls for summary view #}
      {% if current_view == 'summary' and template_controls %}
      {{ template_controls|safe }}
      {% endif %}
      {# Split view inline controls #}
      {% if current_view == 'split' %}
      <div class="split-controls">
        <button id="splitControlsToggle" class="inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" aria-expanded="true" title="Toggle split controls">Controls</button>
        <input id="splitSearch" class="split-search h-9 rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm" placeholder="Filter views..." aria-label="Filter split views" />
        <div class="split-inline">
          <span class="muted">Left</span>
          <select id="splitLeft" class="h-9 rounded-md border border-slate-200 bg-white px-2 text-sm shadow-sm text-slate-900">
            {% for value, label in split_options %}
            <option value="{{ value }}"{% if value == left_view %} selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <div class="split-actions">
            <button id="splitTighten" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" title="Tighten width">-</button>
            <button id="splitSwap" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" title="Swap panes">⇄</button>
            <button id="splitWiden" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" title="Widen width">+</button>
          </div>
          <span class="muted">Right</span>
          <select id="splitRight" class="h-9 rounded-md border border-slate-200 bg-white px-2 text-sm shadow-sm text-slate-900">
            {% for value, label in split_options %}
            <option value="{{ value }}"{% if value == right_view %} selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      {% endif %}
      {# Translation language select #}
      {% if current_view == 'translated' and translation_langs %}
      <div class="lang-select">
        <label for="translationLang">Language</label>
        <select id="translationLang" class="h-9 rounded-md border border-slate-200 bg-white px-2 text-sm shadow-sm text-slate-900">
          {% for lang in translation_langs %}
          <option value="{{ lang }}"{% if lang == selected_lang %} selected{% endif %}>{{ lang }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      {# Fullscreen controls #}
      <div class="fullscreen-actions">
        <button id="fullscreenEnter" class="fullscreen-enter inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" title="Enter fullscreen">Fullscreen</button>
        <button id="fullscreenExit" class="fullscreen-exit inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button" title="Exit Fullscreen">Exit Fullscreen</button>
      </div>
    </div>
  </div>
  {% endif %}

  <div class="detail-body">
    {# PDF-only warning #}
    {% if is_pdf_only and current_view in ['summary', 'source'] %}
    <div class="warning">PDF-only entry: summary and source views are unavailable.</div>
    {% endif %}

    {# Main content based on view #}
    {% if current_view == 'summary' %}
      {# Summary view #}
      {% if summary_template_name %}
      <div class="muted">Template: {{ summary_template_name }}</div>
      {% endif %}
      {% if template_warning %}
      {{ template_warning|safe }}
      {% endif %}
      {% if embed and template_controls %}
      {{ template_controls|safe }}
      {% endif %}
      {# Outline #}
      {% if show_outline %}
      <div id="outline" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);max-width:260px;max-height:calc(100vh - var(--outline-top,96px) - 60px);overflow-y:auto;padding:12px;background:#ffffff;border:1px solid #d0d7de;border-radius:8px;box-shadow:0 2px 8px rgba(27,31,36,0.08);font-size:13px;z-index:5;display:none;">
        <div style="position:sticky;top:-12px;background:#ffffff;z-index:2;padding:4px 0 6px;">
        <button id="outlineClose" class="inline-flex h-7 items-center justify-center rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-900 shadow-sm hover:bg-slate-50" style="float:right;">Hide</button>
          <strong style="color:#1f2a37;">Outline</strong>
        </div>
        <div id="outlineContent" style="margin-top:8px;"></div>
      </div>
      <div id="outlineToggleContainer" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);z-index:4;">
        <button id="outlineToggle" class="inline-flex h-9 items-center justify-center rounded-md bg-slate-900 px-3 text-sm text-white shadow hover:bg-slate-800">☰ Outline</button>
      </div>
      {% endif %}
      <article id="content" class="content">{{ body_html|safe }}</article>

    {% elif current_view == 'source' %}
      {# Source view #}
      {% if body_html.startswith('<div class="warning') %}
        {# Error state - just show the warning #}
        {{ body_html|safe }}
      {% else %}
        {# Normal state - show content with outline #}
        <div class="muted">{{ source_path }}</div>
        <div class="muted" style="margin-top:10px;">Rendered from source markdown:</div>
        {% if show_outline %}
        <div id="outline" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);max-width:260px;max-height:calc(100vh - var(--outline-top,96px) - 60px);overflow-y:auto;padding:12px;background:#ffffff;border:1px solid #d0d7de;border-radius:8px;box-shadow:0 2px 8px rgba(27,31,36,0.08);font-size:13px;z-index:5;display:none;">
          <div style="position:sticky;top:-12px;background:#ffffff;z-index:2;padding:4px 0 6px;">
        <button id="outlineClose" class="inline-flex h-7 items-center justify-center rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-900 shadow-sm hover:bg-slate-50" style="float:right;">Hide</button>
            <strong style="color:#1f2a37;">Outline</strong>
          </div>
          <div id="outlineContent" style="margin-top:8px;"></div>
        </div>
        <div id="outlineToggleContainer" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);z-index:4;">
          <button id="outlineToggle" class="inline-flex h-9 items-center justify-center rounded-md bg-slate-900 px-3 text-sm text-white shadow hover:bg-slate-800">☰ Outline</button>
        </div>
        {% endif %}
        <article id="content" class="content"{% if source_markdown_url %}{% if body_html %} data-raw-markdown-url="{{ source_markdown_url }}"{% else %} data-markdown-url="{{ source_markdown_url }}"{% endif %}{% endif %}{% if images_base_url %} data-images-base-url="{{ images_base_url }}"{% endif %}>{{ body_html|safe }}</article>
        <div id="markdownStatus" class="muted" style="margin-top:10px;">{% if body_html %}Loading raw markdown...{% else %}Loading markdown...{% endif %}</div>
        <details style="margin-top:12px;"><summary>Raw markdown</summary>
          <pre><code id="rawMarkdown"></code></pre>
        </details>
      {% endif %}

    {% elif current_view == 'translated' %}
      {# Translated view #}
      {% if body_html.startswith('<div class="warning') %}
        {# Error state - just show the warning #}
        {{ body_html|safe }}
      {% else %}
        {# Normal state - show content with outline #}
        <div class="muted">Language: {{ selected_lang }}</div>
        <div class="muted">{{ translated_path }}</div>
        <div class="muted" style="margin-top:10px;">Rendered from translated markdown:</div>
        {% if embed and translation_langs %}
        <div class="lang-select" style="margin: 8px 0;">
          <label for="translationLang">Language</label>
          <select id="translationLang" class="h-9 rounded-md border border-slate-200 bg-white px-2 text-sm text-slate-900 shadow-sm">
            {% for lang in translation_langs %}
            <option value="{{ lang }}"{% if lang == selected_lang %} selected{% endif %}>{{ lang }}</option>
            {% endfor %}
          </select>
        </div>
        {% endif %}
        {% if show_outline %}
        <div id="outline" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);max-width:260px;max-height:calc(100vh - var(--outline-top,96px) - 60px);overflow-y:auto;padding:12px;background:#ffffff;border:1px solid #d0d7de;border-radius:8px;box-shadow:0 2px 8px rgba(27,31,36,0.08);font-size:13px;z-index:5;display:none;">
          <div style="position:sticky;top:-12px;background:#ffffff;z-index:2;padding:4px 0 6px;">
            <button id="outlineClose" class="inline-flex h-7 items-center justify-center rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-900 shadow-sm hover:bg-slate-50" style="float:right;">Hide</button>
            <strong style="color:#1f2a37;">Outline</strong>
          </div>
          <div id="outlineContent" style="margin-top:8px;"></div>
        </div>
        <div id="outlineToggleContainer" style="position:fixed;top:var(--outline-top,96px);left:var(--outline-left,20px);z-index:4;">
          <button id="outlineToggle" class="inline-flex h-9 items-center justify-center rounded-md bg-slate-900 px-3 text-sm text-white shadow hover:bg-slate-800">☰ Outline</button>
        </div>
        {% endif %}
        <article id="content" class="content"{% if translated_markdown_url %}{% if body_html %} data-raw-markdown-url="{{ translated_markdown_url }}"{% else %} data-markdown-url="{{ translated_markdown_url }}"{% endif %}{% endif %}{% if images_base_url %} data-images-base-url="{{ images_base_url }}"{% endif %}>{{ body_html|safe }}</article>
        <div id="markdownStatus" class="muted" style="margin-top:10px;">{% if body_html %}Loading raw markdown...{% else %}Loading markdown...{% endif %}</div>
        <details style="margin-top:12px;"><summary>Raw markdown</summary>
          <pre><code id="rawMarkdown"></code></pre>
        </details>
      {% endif %}

    {% elif current_view == 'pdf' %}
      {# PDF view (canvas) #}
      {% if body_html.startswith('<div class="warning') %}
        {{ body_html|safe }}
      {% else %}
        <div class="muted">{{ pdf_filename }}</div>
        <div class="flex flex-wrap items-center gap-2 py-2">
          <button id="prev" class="inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button">Prev</button>
          <button id="next" class="inline-flex h-9 items-center justify-center rounded-md border border-slate-200 bg-white px-3 text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button">Next</button>
          <span class="muted">Page <span id="page_num">1</span> / <span id="page_count">?</span></span>
          <span class="flex-1"></span>
          <button id="zoomOut" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button">-</button>
          <button id="zoomIn" class="inline-flex h-9 w-9 items-center justify-center rounded-md border border-slate-200 bg-white text-sm text-slate-900 shadow-sm hover:bg-slate-50" type="button">+</button>
        </div>
        <canvas id="the-canvas" class="w-full rounded-lg border border-slate-200"></canvas>
      {% endif %}

    {% elif current_view == 'pdfjs' %}
      {# PDF.js viewer view #}
      {% if body_html.startswith('<div class="warning') %}
        {{ body_html|safe }}
      {% else %}
        <div class="muted">{{ pdf_filename }}</div>
        <iframe class="pdfjs-frame" src="{{ pdfjs_url }}" title="PDF.js Viewer"></iframe>
      {% endif %}

    {% elif current_view == 'split' %}
      {# Split view #}
      <div class="split-layout">
        <div class="split-pane">
          <iframe id="leftPane" src="{{ left_src }}" title="Left pane"></iframe>
        </div>
        <div class="split-pane">
          <iframe id="rightPane" src="{{ right_src }}" title="Right pane"></iframe>
        </div>
      </div>

    {% endif %}
  </div>
  <button id="backToTop" class="back-to-top" type="button" title="Back to top">↑</button>
</div>
{% endblock %}

{% block extra_scripts %}
{# CDN scripts for markdown rendering #}
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/katex.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.27/dist/contrib/auto-render.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-lib@0.15.4/dist/browser/index.min.js"></script>
<script>
  window.__markmapLib = window.markmap || window.__markmapLib;
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/browser/index.min.js"></script>
<script>
  window.markmap = window.markmap || {};
  window.markmap.autoLoader = { manual: true };
</script>
<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader@0.18.12/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@12.0.1/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>

{# PDF.js for PDF view #}
{% if current_view == 'pdf' %}
<script>
(function() {
  var primary = {{ pdfjs_script_url|tojson }};
  var fallback = "/pdfjs/build/pdf.js";
  if (!primary) {
    primary = fallback;
    fallback = "";
  }
  window.PDFJS_SCRIPT_SRC = primary;
  window.PDFJS_WORKER_SRC = {{ pdfjs_worker_url|tojson }} || "/pdfjs/build/pdf.worker.js";
  function notifyLoaded() {
    try {
      window.dispatchEvent(new Event('pdfjs:loaded'));
    } catch (err) {
      var event = document.createEvent('Event');
      event.initEvent('pdfjs:loaded', true, true);
      window.dispatchEvent(event);
    }
  }
  function loadScript(src, onerror) {
    var script = document.createElement('script');
    script.src = src;
    script.defer = true;
    script.onload = notifyLoaded;
    if (onerror) script.onerror = onerror;
    document.head.appendChild(script);
  }
  if (fallback && primary !== fallback) {
    loadScript(primary, function() { loadScript(fallback); });
  } else {
    loadScript(primary);
  }
})();
</script>
{% endif %}

{# Main detail JavaScript #}
<script src="/static/js/detail.js"></script>

{# Outline functionality #}
{% if show_outline %}
<script src="/static/js/outline.js"></script>
{% endif %}
{% endblock %}