{% extends "base.html" %}
{% block title %}{{ note.comment|truncatechars:60 }} — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="mb-4">
  <a href="{% url 'fossil:technotes' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Technotes</a>
</div>

<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <!-- Header -->
  <div class="px-6 py-5 border-b border-gray-700">
    <div class="flex items-start justify-between gap-4">
      <div class="flex-1">
        <h2 class="text-xl font-bold text-gray-100 mb-1">{{ note.comment }}</h2>
        <div class="flex items-center gap-3 text-xs text-gray-500">
          <a href="{% url 'fossil:user_activity' slug=project.slug username=note.user %}"
             class="hover:text-brand-light">{{ note.user }}</a>
          <span class="font-mono text-brand-light">{{ note.uuid|truncatechars:16 }}</span>
          <span>{{ note.timestamp|date:"Y-m-d H:i" }}</span>
        </div>
      </div>
      {% if has_write %}
      <div class="flex items-center gap-2 flex-shrink-0">
        <a href="{% url 'fossil:technote_edit' slug=project.slug technote_id=note.uuid %}"
           class="rounded-md bg-gray-700 px-3 py-1.5 text-xs font-semibold text-gray-300 hover:bg-gray-600">Edit</a>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Body -->
  {% if body_html %}
  <div class="px-6 py-5">
    <div class="prose prose-invert prose-gray prose-sm max-w-none">
      {{ body_html }}
    </div>
  </div>
  {% else %}
  <div class="px-6 py-5">
    <p class="text-sm text-gray-500 italic">No body content.</p>
  </div>
  {% endif %}
</div>
{% endblock %}