{% extends "base.html" %}
{% block title %}{{ note.title }} — mdmem{% endblock %}
{% block content %}
<article class="card">
  <h1>{{ note.title }}
    <span class="pill">{{ note.type }}</span>
    <span class="pill {% if note.state == 'active' %}ok{% elif note.state == 'inbox' %}warn{% endif %}">{{ note.state }}</span>
  </h1>
  <p class="meta">id {{ note.id }} · version {{ note.version[:12] }} · updated {{ note.updated }}</p>
  {% if note.summary %}<p class="summary">{{ note.summary }}</p>{% endif %}
  <div class="body">{{ render_markdown(note.body, resolve) | safe }}</div>
  {% if note.keywords %}<p class="kw">{% for k in note.keywords %}<span class="tag">{{ k }}</span>{% endfor %}</p>{% endif %}
  {% if note.tags %}<p class="kw">{% for t in note.tags %}<a class="tag" href="/ui/browse?tag={{ t }}">#{{ t }}</a>{% endfor %}</p>{% endif %}

  <div class="cols">
    <section>
      <h3>Outgoing links</h3>
      <ul>{% for l in note.links %}
        <li>{% if l.resolved %}<a href="/ui/n/{{ l.id }}">{{ l.title }}</a>{% else %}<span class="unresolved">{{ l.title }}</span>{% endif %} <span class="rel">{{ l.rel }}</span></li>
      {% else %}<li class="empty">none</li>{% endfor %}</ul>
    </section>
    <section>
      <h3>Backlinks</h3>
      <ul>{% for l in note.backlinks %}
        <li><a href="/ui/n/{{ l.id }}">{{ l.title }}</a> <span class="rel">{{ l.rel }}</span></li>
      {% else %}<li class="empty">none</li>{% endfor %}</ul>
    </section>
    <section>
      <h3>Supersede chain</h3>
      <ul>{% for l in note.supersede_chain %}
        <li><a href="/ui/n/{{ l.id }}">{{ l.title }}</a> <span class="rel">{{ l.rel }}</span></li>
      {% else %}<li class="empty">none</li>{% endfor %}</ul>
    </section>
  </div>

  {% if note.flags %}
  <h3>Flags</h3>
  <ul>{% for f in note.flags %}<li>{{ f.created }} · {{ f.source }} · {{ f.reason }}</li>{% endfor %}</ul>
  {% endif %}

  <h3>History</h3>
  <ul class="history">
    {% for h in history|reverse %}
    <li><button hx-get="/ui/n/{{ note.id }}/history/{{ h }}" hx-target="#diff-{{ loop.index }}">{{ h }}</button>
      <div id="diff-{{ loop.index }}"></div></li>
    {% else %}<li class="empty">no earlier versions</li>{% endfor %}
  </ul>
  {% if history %}
  <form class="history-compare" hx-get="/ui/n/{{ note.id }}/history-diff" hx-target="#history-compare-diff">
    <label>From <select name="a">
      {% for h in history %}<option value="{{ h }}" {% if loop.first %}selected{% endif %}>{{ h }}</option>{% endfor %}
    </select></label>
    <label>To <select name="b">
      <option value="current" selected>current</option>
      {% for h in history|reverse %}<option value="{{ h }}">{{ h }}</option>{% endfor %}
    </select></label>
    <button type="submit">Compare</button>
  </form>
  <div id="history-compare-diff"></div>
  {% endif %}

  <div class="actions">
    {% if note.state == 'inbox' %}
    {# Review without a round trip: having come here from the inbox to fix the
       frontmatter, the decision belongs on this page too. Same route the inbox
       posts to, so revision merges and supersede chains behave identically. #}
    <form method="post" action="/ui/n/{{ note.id }}/approve">
      <button class="primary" type="submit">Approve</button>
    </form>
    <form method="post" action="/ui/n/{{ note.id }}/reject">
      <input type="text" name="reason" placeholder="Reason (optional)">
      <button class="danger" type="submit">Reject</button>
    </form>
    {% endif %}
    <a class="button" href="/ui/n/{{ note.id }}/edit">Edit</a>
    {% if note.state != 'archive' %}
    <form method="post" action="/ui/n/{{ note.id }}/state"><input type="hidden" name="state" value="archive"><button type="submit">Archive</button></form>
    {% else %}
    <form method="post" action="/ui/n/{{ note.id }}/state"><input type="hidden" name="state" value="active"><button type="submit">Restore</button></form>
    {% endif %}
    <details>
      <summary class="danger">Delete permanently</summary>
      <form method="post" action="/ui/n/{{ note.id }}/delete">
        <p class="meta">The file, its history and its index rows are removed. Type the id to confirm:</p>
        <input type="text" name="confirm" placeholder="{{ note.id }}">
        <button class="danger" type="submit">Delete</button>
      </form>
    </details>
  </div>
</article>
{% endblock %}