{% extends "base.html" %}
{% block title %}{{ article.front_matter.title }} — MemForge{% endblock %}

{% block content %}
<div class="max-w-3xl">
  <!-- Breadcrumb -->
  <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
    <a href="/knowledge" class="hover:text-indigo-500">Knowledge</a>
    <span>/</span>
    <span class="text-gray-600 dark:text-gray-300 truncate">{{ article.front_matter.title }}</span>
  </div>

  <!-- Article header -->
  <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm mb-4">
    <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-700">
      <div class="flex items-start justify-between gap-4">
        <div class="flex-1 min-w-0">
          <div class="flex items-center gap-2 flex-wrap mb-2">
            <span class="badge
              {% if article.front_matter.type == 'decision' %}bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300
              {% elif article.front_matter.type == 'gotcha' %}bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300
              {% elif article.front_matter.type == 'pattern' %}bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300
              {% elif article.front_matter.type == 'contract' %}bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300
              {% else %}bg-gray-100 text-gray-600 dark:bg-gray-700{% endif %}">
              {{ article.front_matter.type }}
            </span>
            <span class="badge {% if article.front_matter.confidence == 'high' %}bg-emerald-100 text-emerald-700{% elif article.front_matter.confidence == 'medium' %}bg-yellow-100 text-yellow-700{% else %}bg-gray-100 text-gray-500{% endif %}">
              {{ article.front_matter.confidence }}
            </span>
            <span class="badge bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400">{{ article.front_matter.scope }}</span>
            {% for tag in article.front_matter.tags %}
            <a href="/knowledge?tag={{ tag }}" class="badge bg-indigo-50 text-indigo-600 dark:bg-indigo-900/40 dark:text-indigo-300 hover:bg-indigo-100">#{{ tag }}</a>
            {% endfor %}
          </div>
          <h1 class="text-xl font-bold">{{ article.front_matter.title }}</h1>
          <p class="text-xs text-gray-400 mt-1">
            Created {{ article.front_matter.created.strftime('%Y-%m-%d') }} ·
            Updated {{ article.front_matter.updated.strftime('%Y-%m-%d') }} ·
            id: {{ article.front_matter.id }}
          </p>
        </div>

        <!-- Actions -->
        <div class="flex items-center gap-2 shrink-0">
          <div id="pin-btn">
            {% if pinned %}
            <button hx-post="/api/unpin/{{ article.slug }}" hx-target="#pin-btn" hx-swap="innerHTML"
                    class="text-xs bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-300 px-2 py-1 rounded border border-amber-200 dark:border-amber-700 font-medium">
              📌 Unpin
            </button>
            {% else %}
            <button hx-post="/api/pin/{{ article.slug }}" hx-target="#pin-btn" hx-swap="innerHTML"
                    class="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 rounded border border-gray-200 dark:border-gray-600">
              Pin
            </button>
            {% endif %}
          </div>

          <a href="/edit/{{ store_root }}/memory/knowledge/{{ article.front_matter.type }}s/{{ article.slug }}.md"
             class="text-xs bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300 px-2 py-1 rounded border border-gray-200 dark:border-gray-600 hover:bg-gray-200">
            Edit
          </a>

          <button hx-post="/api/forget/{{ article.slug }}"
                  hx-confirm="Archive '{{ article.front_matter.title }}'? This moves it to archive/."
                  hx-target="body"
                  hx-push-url="/knowledge"
                  class="text-xs text-red-500 hover:text-red-700 px-2 py-1 rounded border border-red-200 dark:border-red-800">
            Forget
          </button>
        </div>
      </div>
    </div>

    <!-- Body -->
    <div class="px-6 py-5 prose prose-sm dark:prose-invert max-w-none">
      {{ article.body | markdown | safe }}
    </div>

    <!-- Refs -->
    {% if article.front_matter.refs %}
    <div class="px-6 py-3 border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/30 rounded-b-lg">
      <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Code refs</div>
      {% for ref in article.front_matter.refs %}
      <div class="text-xs font-mono text-indigo-600 dark:text-indigo-400">{{ ref.path }}{% if ref.revision %} @ {{ ref.revision[:8] }}{% endif %}</div>
      {% endfor %}
    </div>
    {% endif %}

    <!-- Links -->
    {% if article.front_matter.links %}
    <div class="px-6 py-3 border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/30">
      <div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Related</div>
      <div class="flex flex-wrap gap-2">
        {% for link in article.front_matter.links %}
        {% set slug = link | replace('[[', '') | replace(']]', '') | replace('concepts/', '') | replace('decisions/', '') %}
        <a href="/knowledge/{{ slug }}" class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline">{{ link }}</a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>

  <a href="/knowledge" class="text-sm text-gray-400 hover:text-indigo-500">← Back to Knowledge</a>
</div>
{% endblock %}