{% extends "base.html" %}
{% block content %}
<div class="breadcrumb">
    {% if domain %}<span style="color:{{ domain.color }}">{{ domain.name }}</span><span class="sep">/</span>{% endif %}
    {% if project %}<a href="/projects/{{ project.id }}">{{ project.name }}</a><span class="sep">/</span>{% endif %}
    <span>{{ item.title }}</span>
</div>
<div class="detail-header">
    <div class="flex items-center justify-between">
        <h1 class="detail-title">{{ item.title }}</h1>
        <div class="flex gap-2">
            <a href="/notes/{{ item.id }}/edit" class="btn btn-secondary btn-sm">Edit</a>
            <form action="/notes/{{ item.id }}/delete" method="post" data-confirm="Delete?" style="display:inline"><button class="btn btn-danger btn-sm">Delete</button></form>
        </div>
    </div>
    <div class="detail-meta mt-2">
        <span class="detail-meta-item">Updated {{ item.updated_at.strftime('%Y-%m-%d %H:%M') if item.updated_at else '' }}</span>
        {% if item.tags %}{% for tag in item.tags %}<span class="row-tag">{{ tag }}</span>{% endfor %}{% endif %}
    </div>
</div>
{% if item.body %}
<div class="card"><div class="detail-body" style="white-space:pre-wrap;font-family:var(--font-body)">{{ item.body }}</div></div>
{% else %}
<div class="card"><div class="text-muted" style="padding:20px">No content yet. <a href="/notes/{{ item.id }}/edit">Start writing</a></div></div>
{% endif %}
{% endblock %}