{% extends "base.html" %}
{% block title %}{{ note.title }} — PKM{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto">
  <div class="flex items-center justify-between">
    <h1 class="text-3xl font-semibold">{{ note.title }}</h1>
    <a class="btn btn-sm" href="{{ url_for('notes.notes_index') }}">All notes</a>
  </div>

  <div class="mt-2 flex flex-wrap items-center gap-2 text-sm opacity-80">
    <span>ID: <code class="kbd kbd-sm">{{ note.id }}</code></span>
    <span>Created: {{ note.created }}</span>
    <span>Updated: {{ note.updated }}</span>
    {% if note.status %}<span class="badge badge-outline">{{ note.status }}</span>{% endif %}
    {% if note.tags %}
      <span class="ml-2">Tags:</span>
      <div class="flex gap-1">
        {% for t in note.tags %}
          <span class="badge badge-ghost">{{ t }}</span>
        {% endfor %}
      </div>
    {% endif %}
  </div>

  <div class="mt-4">
    <h2 class="text-lg font-medium mb-2">Body (raw Markdown)</h2>
    <pre class="p-4 bg-base-200 rounded overflow-x-auto whitespace-pre-wrap">{{ note.body }}</pre>
  </div>

  <div class="mt-6">
    <h3 class="font-medium mb-2">Quick edit</h3>
    <form method="post" action="{{ url_for('notes.notes_update_body', note_id=note.id) }}">
      <textarea name="body" rows="10" class="textarea textarea-bordered w-full">{{ note.body }}</textarea>
      <div class="mt-2">
        <button class="btn btn-primary btn-sm" type="submit">Save</button>
      </div>
    </form>
  </div>

  <div class="mt-6 opacity-70 text-sm">
    <div>File: <code class="kbd kbd-sm">{{ note.rel_path }}</code></div>
    <div>Slug: <code class="kbd kbd-sm">{{ note.slug }}</code></div>
  </div>
</div>
{% endblock %}