{% extends "base.html" %}
{% block title %}{{ article.title }} - {{ wiki_name }}{% endblock %}
{% block content %}

{% macro field_label(key) -%}
  {%- if lang == 'ko' -%}
    {%- set labels = {
      'facts': '핵심 사실', 'mission': '목적', 'design_principles': '설계 원칙',
      'architecture': '시스템 구조', 'ai_workflow': 'AI 작업 흐름',
      'protocol_contract': '프로토콜 규약', 'retrieval_pipeline': '검색 파이프라인',
      'document_model': '문서 모델', 'write_safety': '안전한 쓰기',
      'verification_policy': '검증 정책', 'purpose_specific_wikis': '목적별 위키',
      'agent_integrations': 'AI 에이전트 연동', 'human_role': '인간의 역할',
      'current_release': '현재 릴리스', 'use_cases': '활용 사례',
      'limitations': '한계', 'best_practices': '운영 원칙',
      'when_to_use': '사용하기 좋은 경우', 'when_not_to_use': '적합하지 않은 경우',
      'definition': '정의', 'key_principles': '핵심 원칙', 'examples': '예시',
      'applications': '응용', 'steps': '절차', 'prerequisites': '사전 조건',
      'solution': '해결 방법', 'root_cause': '원인', 'timeline': '연표',
      'conclusion': '결론', 'caveats': '주의사항', 'status': '상태'
    } -%}
  {%- else -%}
    {%- set labels = {} -%}
  {%- endif -%}
  {{- labels.get(key, key|replace('_', ' ')|title) -}}
{%- endmacro %}

{% macro render_value(value, depth=0) %}
  {% if value is mapping %}
    <dl class="nested-dict nested-depth-{{ [depth, 3]|min }}">
      {% for k, v in value.items() %}
      <div class="kv-pair">
        <dt class="kv-key">{{ label(k) }}{% if label(k) != k %}<small class="field-key" aria-label="original field key">{{ k }}</small>{% endif %}</dt>
        <dd class="kv-value">{{ render_value(v, depth + 1) }}</dd>
      </div>
      {% endfor %}
    </dl>
  {% elif value is iterable and value is not string %}
    <ul class="value-list">
      {% for item in value %}
      <li>
        {% if item is mapping %}
          {{ render_value(item, depth + 1) }}
        {% else %}
          {{ easy(item) }}
        {% endif %}
      </li>
      {% endfor %}
    </ul>
  {% else %}
    <span class="scalar-value">{{ easy(value) }}</span>
  {% endif %}
{% endmacro %}

<div class="article-shell">
  <header class="document-masthead">
    <div class="document-breadcrumb">
      <a href="/category/{{ article.category }}">{{ article.category|replace('/', ' / ') }}</a>
      <span aria-hidden="true">·</span>
      <span>{{ label(article.content.type or 'document') }}</span>
    </div>
    <h1>{{ article.title }}</h1>
    {% if article.content.get('what') %}
    <p class="document-lede">{{ easy(article.content.get('what')) }}</p>
    {% elif article.content.get('summary') %}
    <p class="document-lede">{{ easy(article.content.get('summary')) }}</p>
    {% endif %}
    <div class="article-meta-bar">
      {% if article.metadata.get('verification_status') == 'pending' %}
      <span class="badge badge-maturity badge-maturity-draft">{{ t('article.pending') }}</span>
      {% endif %}
      {% if quality %}
      <span class="badge badge-maturity badge-maturity-{{ quality.maturity }}">{{ easy(quality.maturity) }}</span>
      {% endif %}
      {% for tag in article.tags %}
      <a href="/tag/{{ tag }}" class="badge badge-tag">{{ easy(tag) }}</a>
      {% endfor %}
    </div>
  </header>

  <div class="article-layout">
    <article class="article-view">
      <section class="document-overview" aria-label="Document status">
        <div class="overview-metrics">
          <div class="overview-metric">
            <span class="overview-value">{{ "%.0f"|format(article.confidence * 100) }}%</span>
            <span class="overview-label">{{ t('common.confidence') }}</span>
          </div>
          {% if quality %}
          <div class="overview-metric">
            <span class="overview-value">{{ "%.0f"|format(quality.quality_score * 100) }}%</span>
            <span class="overview-label">{{ t('common.quality') }}</span>
          </div>
          {% endif %}
          <div class="overview-metric">
            <span class="overview-value">v{{ article.version }}</span>
            <span class="overview-label">{{ t('article.version') }}</span>
          </div>
          <div class="overview-metric">
            <span class="overview-value">{{ article.verification|length }}</span>
            <span class="overview-label">{{ t('article.verified_paths') }}</span>
          </div>
        </div>

        <dl class="document-facts">
          <div><dt>ID</dt><dd><code>{{ article.id }}</code></dd></div>
          <div><dt>{{ t('common.author') }}</dt><dd>{{ article.author }}</dd></div>
          <div><dt>{{ t('common.created') }}</dt><dd>{{ article.created_at.strftime('%Y-%m-%d') }}</dd></div>
          <div><dt>{{ t('common.modified') }}</dt><dd>{{ article.last_modified.strftime('%Y-%m-%d %H:%M') }}</dd></div>
        </dl>
      </section>

      {% if article.content.get('summary') and article.content.get('what') %}
      <section class="document-summary" aria-labelledby="summary-heading">
        <h2 id="summary-heading">{{ t('article.overview') }}</h2>
        <p>{{ easy(article.content.get('summary')) }}</p>
      </section>
      {% endif %}

      <div class="article-content structured">
        {% for key, value in article.content.items() %}
          {% if not key.startswith('_') and key not in ['type', 'what', 'summary'] %}
            {% set anchor = 'section-' ~ key|replace('_', '-') %}
            {% if key == 'disputes' and value is iterable and value is not string %}
            <section class="content-section" id="{{ anchor }}">
              <h2 class="section-key">{{ label(key) }}{% if label(key) != key %}<small class="field-key">{{ key }}</small>{% endif %}</h2>
              {% for dispute in value %}
                {% if dispute is mapping %}
                <div class="dispute-card">
                  <div class="dispute-topic">{{ dispute.get('topic', '') }}</div>
                  {% if dispute.get('status') %}<span class="badge badge-dispute-{{ dispute.status }}">{{ dispute.status }}</span>{% endif %}
                  {% if dispute.get('consensus_shift') %}<p class="dispute-shift">{{ dispute.consensus_shift }}</p>{% endif %}
                  {% if dispute.get('positions') is iterable %}
                  <div class="dispute-positions">
                    {% for pos in dispute.positions %}
                      {% if pos is mapping %}
                      <div class="position-card">
                        <div class="position-claim">{{ pos.get('claim', '') }}</div>
                        {% if pos.get('supporters') %}<div class="position-who">{{ pos.supporters }}</div>{% endif %}
                        {% if pos.get('evidence_quality') %}<span class="badge badge-evidence">{{ pos.evidence_quality }}</span>{% endif %}
                        {% if pos.get('note') %}<p class="position-note">{{ pos.note }}</p>{% endif %}
                      </div>
                      {% endif %}
                    {% endfor %}
                  </div>
                  {% endif %}
                </div>
                {% else %}
                <div>{{ render_value(dispute) }}</div>
                {% endif %}
              {% endfor %}
            </section>
            {% elif key == 'historiography' and value is iterable and value is not string %}
            <section class="content-section" id="{{ anchor }}">
              <h2 class="section-key">{{ label(key) }}{% if label(key) != key %}<small class="field-key">{{ key }}</small>{% endif %}</h2>
              <div class="timeline-track">
                {% for entry in value %}
                  {% if entry is mapping %}
                  <div class="timeline-entry">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                      <span class="timeline-period">{{ entry.get('period', '') }}</span>
                      <p class="timeline-interp">{{ entry.get('interpretation', entry.get('consensus', '')) }}</p>
                      {% if entry.get('context') %}<p class="timeline-ctx">{{ entry.context }}</p>{% endif %}
                      {% if entry.get('source_type') %}<span class="badge badge-tag">{{ entry.source_type }}</span>{% endif %}
                      {% if entry.get('note') %}<p class="timeline-note">{{ entry.note }}</p>{% endif %}
                    </div>
                  </div>
                  {% endif %}
                {% endfor %}
              </div>
            </section>
            {% elif key == 'timeline' and value is iterable and value is not string %}
            <section class="content-section" id="{{ anchor }}">
              <h2 class="section-key">{{ label(key) }}{% if label(key) != key %}<small class="field-key">{{ key }}</small>{% endif %}</h2>
              <div class="timeline-track">
                {% for entry in value %}
                  {% if entry is mapping %}
                  <div class="timeline-entry">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                      <span class="timeline-period">{{ entry.get('date', entry.get('period', '')) }}</span>
                      <p class="timeline-interp">{{ entry.get('event', entry.get('description', '')) }}</p>
                      {% if entry.get('entity_ids') %}
                      <p class="timeline-entities">
                        <span>{{ '관련 엔터티' if lang == 'ko' else 'Linked entities' }}:</span>
                        {% for entity_id in entry.get('entity_ids', []) %}
                        <span class="badge badge-tag" data-entity-id="{{ entity_id }}">{{ entity_labels.get(entity_id, entity_id) }}</span>
                        {% endfor %}
                      </p>
                      {% endif %}
                      {% if entry.get('status') %}<p class="timeline-note">{{ entry.status }}</p>{% endif %}
                    </div>
                  </div>
                  {% endif %}
                {% endfor %}
              </div>
            </section>
            {% else %}
            <section class="content-section" id="{{ anchor }}">
              <h2 class="section-key">{{ label(key) }}{% if label(key) != key %}<small class="field-key">{{ key }}</small>{% endif %}</h2>
              <div class="section-value">{{ render_value(value) }}</div>
            </section>
            {% endif %}
          {% endif %}
        {% endfor %}
      </div>

      {% if article.source_records or article.sources %}
      <section class="document-sources" id="document-sources">
        <div class="section-heading-row">
          <h2>{{ t('common.sources') }}</h2>
          <span>{{ article.sources|length }}</span>
        </div>
        <ol class="source-list">
          {% if article.source_records %}
            {% for src in article.source_records %}
            <li>
              <span class="source-index">{{ "%02d"|format(loop.index) }}</span>
              <div>
                <a href="{{ src.url }}" target="_blank" rel="noopener">{{ src.title or src.url }}</a>
                <span class="source-url">{{ src.url }}</span>
              </div>
            </li>
            {% endfor %}
          {% else %}
            {% for src in article.sources %}
            <li>
              <span class="source-index">{{ "%02d"|format(loop.index) }}</span>
              <div><a href="{{ src }}" target="_blank" rel="noopener">{{ src }}</a></div>
            </li>
            {% endfor %}
          {% endif %}
        </ol>
      </section>
      {% endif %}

      <section class="document-technical" aria-label="Technical document data">
        {% if article.content._meta is defined and article.content._meta %}
        <details class="meta-panel">
          <summary>{{ t('article.document_meta') }}</summary>
          <pre><code>{{ article.content._meta | yaml_dump }}</code></pre>
        </details>
        {% endif %}

        {% if article.content._changelog is defined and article.content._changelog %}
        <details class="meta-panel">
          <summary>{{ t('article.changelog', count=article.content._changelog|length) }}</summary>
          <div class="changelog-list">
            {% for entry in article.content._changelog|reverse %}
            <div class="changelog-entry">
              <span class="changelog-date">{{ entry.date }}</span>
              <span class="badge badge-action">{{ entry.action }}</span>
              {% if entry.fields %}<span class="changelog-fields">{{ entry.fields|join(', ') }}</span>{% endif %}
              {% if entry.details %}<p class="changelog-details">{{ entry.details }}</p>{% endif %}
            </div>
            {% endfor %}
          </div>
        </details>
        {% endif %}

        {% if article.history %}
        <details class="meta-panel">
          <summary>{{ t('article.history_normalized') }} ({{ article.history|length }})</summary>
          <pre><code>{{ article.history | yaml_dump }}</code></pre>
        </details>
        {% endif %}

        <details class="raw-yaml">
          <summary>{{ t('article.raw_yaml') }}</summary>
          <pre><code>{{ article.content | yaml_dump }}</code></pre>
        </details>
      </section>

      <div class="article-actions article-danger-zone">
        <span>{{ t('article.management') }}</span>
        <form action="/delete/{{ article.id }}" method="post" class="inline-form" onsubmit="return confirm('{{ t('article.confirm_delete') }}')">
          <button type="submit" class="btn btn-delete btn-small">{{ t('common.delete') }}</button>
        </form>
      </div>
    </article>

    <aside class="article-sidebar">
      <div class="sidebar-actions">
        <a href="/edit/{{ article.id }}" class="btn btn-edit">{{ t('common.edit') }}</a>
        <a href="/graph/{{ article.id }}" class="btn btn-secondary">{{ t('article.local_graph') }}</a>
      </div>

      <nav class="document-toc" aria-label="{{ t('article.on_this_page') }}">
        <div class="sidebar-kicker">{{ t('article.on_this_page') }}</div>
        <div class="toc-links">
          {% if article.content.get('summary') and article.content.get('what') %}
          <a href="#summary-heading">{{ t('article.overview') }}</a>
          {% endif %}
          {% for key, value in article.content.items() %}
            {% if not key.startswith('_') and key not in ['type', 'what', 'summary'] %}
            <a href="#section-{{ key|replace('_', '-') }}">{{ label(key) }}</a>
            {% endif %}
          {% endfor %}
          {% if article.source_records or article.sources %}<a href="#document-sources">{{ t('common.sources') }}</a>{% endif %}
        </div>
      </nav>

      <div class="sidebar-review">
        <div class="sidebar-kicker">{{ t('article.review_status') }}</div>
        <div class="review-row"><span>{{ t('common.confidence') }}</span><strong>{{ "%.0f"|format(article.confidence * 100) }}%</strong></div>
        {% if quality %}<div class="review-row"><span>{{ t('common.quality') }}</span><strong>{{ "%.0f"|format(quality.quality_score * 100) }}%</strong></div>{% endif %}
        <div class="review-row"><span>{{ t('article.verified_paths') }}</span><strong>{{ article.verification|length }}</strong></div>
      </div>

      {% if article.related or backlinks or similar %}
      <div class="sidebar-related">
        <div class="sidebar-kicker">{{ t('article.sidebar_related') }}</div>
        <div class="sidebar-links">
          {% for rel in article.related %}<a href="/article/{{ rel }}" class="sidebar-link">{{ related_map.get(rel, rel) }}</a>{% endfor %}
          {% for bl in backlinks[:4] %}<a href="/article/{{ bl.id }}" class="sidebar-link">{{ bl.title }}</a>{% endfor %}
          {% if not article.related and not backlinks %}
            {% for s in similar[:4] %}<a href="/article/{{ s.id }}" class="sidebar-link">{{ s.title }}</a>{% endfor %}
          {% endif %}
        </div>
      </div>
      {% endif %}

    </aside>
  </div>
</div>
{% endblock %}