{% 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">{{ body_html|safe }}</article>
        <details style="margin-top:12px;"><summary>Raw markdown</summary>
          <pre><code>{{ raw_content|escape }}</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">{{ body_html|safe }}</article>
        <details style="margin-top:12px;"><summary>Raw markdown</summary>
          <pre><code>{{ raw_content|escape }}</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/markmap-lib@0.15.4/dist/browser/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markmap-view@0.15.4/dist/index.min.js"></script>

{# PDF.js for PDF view #}
{% if current_view == 'pdf' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.js"></script>
{% endif %}

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

{# Outline functionality #}
{% if show_outline %}
<script>
(function() {
  function initOutline() {
    var content = document.getElementById('content');
    if (!content) return;
    var headings = content.querySelectorAll('h2, h3, h4');
    if (headings.length === 0) return;

    var outline = document.getElementById('outline');
    var toggle = document.getElementById('outlineToggle');
    var close = document.getElementById('outlineClose');
    var outlineContent = document.getElementById('outlineContent');

    if (!outline || !toggle || !close || !outlineContent) return;

    for (var i = 0; i < headings.length; i++) {
      var h = headings[i];
      if (!h.id) h.id = 'heading-' + i;
      var a = document.createElement('a');
      a.href = '#' + h.id;
      a.textContent = h.textContent.trim();
      a.className = 'outline-' + h.tagName.toLowerCase();
      outlineContent.appendChild(a);
    }

    toggle.addEventListener('click', function() {
      outline.style.display = 'block';
      toggle.style.display = 'none';
      document.body.classList.add('outline-open');
    });

    close.addEventListener('click', function() {
      outline.style.display = 'none';
      toggle.style.display = 'block';
      document.body.classList.remove('outline-open');
    });

    var savedState = sessionStorage.getItem('outlineVisible');
    if (savedState === 'true') {
      outline.style.display = 'block';
      toggle.style.display = 'none';
      document.body.classList.add('outline-open');
    } else {
      toggle.style.display = 'block';
      document.body.classList.remove('outline-open');
    }

    var observer = new MutationObserver(function() {
      var isVisible = outline.style.display === 'block';
      sessionStorage.setItem('outlineVisible', String(isVisible));
    });
    observer.observe(outline, { attributes: true, attributeFilter: ['style'] });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initOutline);
  } else {
    initOutline();
  }
})();
</script>
{% endif %}
{% endblock %}