{% extends "base.html" %}
{% import "_links.html" as links with context %}
{% block title %}{{ page.title }} — Cairn Dashboard{% endblock %}
{% block content %}
<section class="panel">
  <nav class="wiki-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ links.url('/wiki') }}">Wiki</a> /
    <a href="{{ links.url('/wiki', {'repo': page.repo}) }}">{{ page.repo }}</a> /
    <span>{{ page.title }}</span>
  </nav>
  <h1>{{ page.title }}</h1>
  <p>
    <span class="badge badge-{{ page.state }}">{{ page.state }}</span>
    <span class="badge badge-{{ page.staleness }}">{{ page.staleness }}</span>
  </p>
  <div class="wiki-layout">
    <div class="wiki-article">
      <div class="wiki-body">
        {{ page.html | safe }}
      </div>
      {% if page.sources %}
      <h2>Sources</h2>
      <ul>
        {% for source in page.sources %}
        <li>
          {% if source.symbol %}
            symbol:
            {%- if source.symbol in page.ref_hrefs %} <a href="{{ page.ref_hrefs[source.symbol] }}"><code>{{ source.symbol }}</code></a>
            {%- else %} <code>{{ source.symbol }}</code>{% endif %}
          {% elif source.path %}
            path: <code>{{ source.path }}</code>
          {% else %}
            {% for key, value in source.items() %}{{ key }}: <code>{{ value }}</code>{% if not loop.last %}, {% endif %}{% endfor %}
          {% endif %}
        </li>
        {% endfor %}
      </ul>
      {% endif %}
      {% if prev or next %}
      <p class="wiki-pager">
        {%- if prev %}<a href="{{ links.url('/wiki/' ~ page.repo ~ '/' ~ prev.page_id) }}">← {{ prev.title }}</a>{% else %}<span class="muted">←</span>{% endif %}
        {%- if prev and next %} · {% endif %}
        {%- if next %}<a href="{{ links.url('/wiki/' ~ page.repo ~ '/' ~ next.page_id) }}">{{ next.title }} →</a>{% else %}<span class="muted">→</span>{% endif %}
      </p>
      {% endif %}
    </div>
    {% if page.toc %}
    <nav class="wiki-toc" aria-label="On this page">
      <div class="wiki-toc-label">On this page</div>
      <ul>
        {% for item in page.toc %}
        <li class="wiki-toc-l{{ item.level }}"><a href="#{{ item.anchor }}">{{ item.text }}</a></li>
        {% endfor %}
      </ul>
    </nav>
    {% endif %}
  </div>
</section>
{% endblock %}
{% block scripts %}
  {#- Mermaid fences render live client-side; offline/no-JS keeps the code
      block visible (the renderer emits pre.mermaid with escaped text). -#}
  <script type="module">
    try {
      const mermaid = await import("https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs");
      mermaid.default.initialize({ startOnLoad: true, securityLevel: "strict" });
    } catch (e) {
      /* CDN unreachable — fences stay as visible code blocks. */
    }
  </script>
{% endblock %}