{% extends "base.html" %}

{% block title %}{{ doc.title }} — Canon{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 font-mono overflow-hidden">
  <a href="/app/{{ current_org | default('') }}/" class="hover:text-accent-400 transition-colors">Dashboard</a>
  <span class="mx-1 text-slate-400 dark:text-slate-600">/</span>
  <a href="/app/{{ current_org | default('') }}/repos/{{ doc.repo_owner }}/{{ doc.repo_name }}" class="hover:text-accent-400 transition-colors truncate">{{ doc.repo_owner }}/{{ doc.repo_name }}</a>
  <span class="mx-1 text-slate-400 dark:text-slate-600">/</span>
  <span class="text-slate-800 dark:text-slate-200">{{ doc.title }}</span>
</nav>

<!-- Header -->
<div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 mb-6">
  <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
    <div class="flex items-center gap-2">
      <h1 class="text-xl sm:text-2xl font-bold font-display text-slate-900 dark:text-slate-100">{{ doc.title }}</h1>
      <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium font-mono bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-400">{{ doc.doc_type }}</span>
    </div>
    <a href="{{ doc.github_url }}" class="inline-flex items-center gap-1 text-sm text-brand-400 hover:text-brand-300 hover:underline shrink-0" target="_blank">
      View on GitHub
    </a>
  </div>
  <p class="text-sm text-slate-500 dark:text-slate-400 font-mono">{{ doc.path }}</p>
</div>

<!-- Content -->
<div class="bg-white dark:bg-surface-elevated rounded-lg border border-gray-200 dark:border-slate-700 px-4 sm:px-6 py-4 prose dark:prose-invert max-w-none">
  {{ doc.rendered_html | safe }}
</div>
{% endblock %}