{% extends "base.html" %}

{% block title %}{{ title }} — ai-memory{% endblock %}

{% block content %}
<nav class="mb-6 flex items-center gap-1 text-sm text-slate-500 dark:text-slate-400">
  <a href="." class="hover:text-blue-600 dark:hover:text-blue-400">home</a>
  <span>/</span>
  <a href="{{ project_href }}" class="hover:text-blue-600 dark:hover:text-blue-400">{{ workspace }}/{{ project }}</a>
  <span>/</span>
  <span class="text-slate-700 dark:text-slate-200 truncate max-w-xs">{{ path }}</span>
</nav>

<article class="max-w-3xl">
  <h1 class="text-3xl font-bold text-slate-900 dark:text-slate-100 mb-3">{{ title }}</h1>

  <!-- Metadata row -->
  <div class="flex flex-wrap items-center gap-2 mb-6 text-xs text-slate-500 dark:text-slate-400">
    <span class="inline-flex items-center rounded px-2 py-0.5 font-medium bg-blue-50 dark:bg-blue-950 text-blue-700 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
      {{ tier }}
    </span>
    <span class="inline-flex items-center rounded px-2 py-0.5 font-medium bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400">
      {{ kind }}
    </span>
    {% if pinned %}
    <span class="inline-flex items-center rounded px-2 py-0.5 font-medium bg-amber-50 dark:bg-amber-950 text-amber-700 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
      pinned
    </span>
    {% endif %}
    <span class="ml-1">Updated {{ updated_relative }}</span>
    <span>·</span>
    <span>Created {{ created_relative }}</span>
    {% if supersedes_path != "" %}
    <span>·</span>
    <span>Supersedes <a href="{{ supersedes_href }}" class="text-blue-600 dark:text-blue-400 underline">{{ supersedes_path }}</a></span>
    {% endif %}
    {% if author_username != "" %}
    <span>·</span>
    <span>
      Last edited by
      <span class="font-medium text-slate-700 dark:text-slate-300">{{ author_username }}</span>
      {% if author_name != "" %}<span class="text-slate-500 dark:text-slate-500">({{ author_name }})</span>{% endif %}
      {% if author_email != "" %}<a href="mailto:{{ author_email }}" class="text-blue-600 dark:text-blue-400 underline">{{ author_email }}</a>{% endif %}
    </span>
    {% endif %}
  </div>

  <!-- Rendered markdown body -->
  <div class="
    [&_h1]:text-3xl [&_h1]:font-bold [&_h1]:mt-6 [&_h1]:mb-3
    [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:mt-5 [&_h2]:mb-2
    [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:mt-4 [&_h3]:mb-2
    [&_h4]:text-lg [&_h4]:font-semibold [&_h4]:mt-3 [&_h4]:mb-1
    [&_p]:my-3 [&_p]:leading-relaxed
    [&_ul]:list-disc [&_ul]:pl-5 [&_ul]:my-3
    [&_ol]:list-decimal [&_ol]:pl-5 [&_ol]:my-3
    [&_li]:my-1
    [&_blockquote]:border-l-4 [&_blockquote]:border-slate-300 [&_blockquote]:dark:border-slate-700 [&_blockquote]:pl-4 [&_blockquote]:italic [&_blockquote]:text-slate-600 [&_blockquote]:dark:text-slate-400 [&_blockquote]:my-3
    [&_code]:bg-slate-100 [&_code]:dark:bg-slate-800 [&_code]:rounded [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono
    [&_pre]:p-3 [&_pre]:rounded [&_pre]:bg-slate-100 [&_pre]:dark:bg-slate-800 [&_pre]:overflow-x-auto [&_pre]:my-3
    [&_pre_code]:bg-transparent [&_pre_code]:p-0
    [&_a]:text-blue-600 [&_a]:dark:text-blue-400 [&_a]:underline
    [&_table]:w-full [&_table]:my-3 [&_table]:border-collapse
    [&_th]:border [&_th]:border-slate-300 [&_th]:dark:border-slate-700 [&_th]:px-3 [&_th]:py-2 [&_th]:text-left [&_th]:bg-slate-50 [&_th]:dark:bg-slate-800
    [&_td]:border [&_td]:border-slate-300 [&_td]:dark:border-slate-700 [&_td]:px-3 [&_td]:py-2
    [&_hr]:border-slate-200 [&_hr]:dark:border-slate-800 [&_hr]:my-6
    [&_mark]:bg-yellow-200 [&_mark]:dark:bg-yellow-800 [&_mark]:px-0.5
    text-slate-800 dark:text-slate-200
  ">
    {{ body_html|safe }}
  </div>
</article>
{% endblock %}