{% extends "base.html" %}
{% block content %}
<section class="graph-view">
  <h1>{{ ui.graph }}</h1>
  <p class="graph-summary">
    {{ graph.summary }} {{ ui.graph_instruction }}
  </p>
  <div class="graph-canvas">
    {{ graph.svg | raw }}
  </div>
  <p class="graph-legend">
    <span><i class="graph-key graph-key-note"></i> {{ ui.written_note }}</span>
    <span><i class="graph-key graph-key-seed"></i> {{ ui.seed_page }}</span>
  </p>
  {% if graph.scope %}
  <p class="graph-scope">{{ graph.scope }}</p>
  {% endif %}

  <section class="graph-directory">
    <h2>{{ ui.all_pages }}</h2>
    {% for group in graph.groups %}
    <div class="graph-group">
      <h3>{{ group.name }}</h3>
      <ul>
      {% for node in group.nodes %}
        <li>
          <a href="{{ node.url }}">{{ node.title }}</a>
          {% if node.seed %}<span>{{ ui.seed }}</span>{% endif %}
        </li>
      {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </section>
</section>
{% endblock %}