{% load static %}
<section class="panel">
  <h3>Backlinks <span class="count">{{ backlinks|length }}</span></h3>
  {% for b in backlinks %}
    <div class="backlink"><a href="{% url 'note_detail' b.source.slug %}">{{ b.source.title }}</a>{% if b.embed %} <span class="pill">embed</span>{% endif %}
      <p class="snippet">{{ b.snippet|safe }}</p></div>
  {% empty %}<p class="muted">No notes link here yet.</p>{% endfor %}
</section>
<section class="panel">
  <h3>Unlinked mentions <span class="count">{{ mentions|length }}</span></h3>
  {% for m in mentions %}
    <div class="backlink"><a href="{% url 'note_detail' m.source.slug %}">{{ m.source.title }}</a>
      <p class="snippet">{{ m.snippet|safe }}</p>
      <form method="post" action="{% url 'link_mention' note.slug %}">{% csrf_token %}
        <input type="hidden" name="source" value="{{ m.source.pk }}"><input type="hidden" name="start" value="{{ m.start }}">
        <button class="btn tiny">Link it</button></form></div>
  {% empty %}<p class="muted">Nothing to link.</p>{% endfor %}
</section>
<section class="panel">
  <h3>Outline</h3>
  <ul class="outline">{% for h in outline %}<li class="lvl{{ h.level }}"><a href="{% url 'note_detail' note.slug %}#{{ h.id }}">{{ h.text }}</a></li>{% empty %}<li class="muted">No headings.</li>{% endfor %}</ul>
</section>
<section class="panel">
  <h3>Local graph</h3>
  <canvas class="graph-canvas small" data-graph-url="{% url 'api_graph' %}?center={{ note.slug }}&hops=2" width="300" height="240"></canvas>
</section>
<script type="module" src="{% static 'notes/js/graph.js' %}"></script>