{% extends "base.html" %}

{% block title %}{{ node.title }}{% endblock title %}

{%- block body %}
    <section>
        <div class="header-row">
            <h1 class="node-title">{{ node.title }}</h1>
            <div class="labels">
                {% if node.title != node.id %}<span class="label id-label">ID: {{ node.id }}</span>{% endif %}
                {% if not node.listed %}<span class="label unlisted-label">Unlisted</span>{% endif %}
                {% if node.id == graph.root_node %}<span class="label root-label">Root</span>{% endif %}
            </div>
        </div>
        {{ node.text | safe }}
    </section>
    {% if node.connections or incoming %}
    <aside class="connections">
        <hr class="connections">
        <h2 class="connections-title">Connections</h2>
        <div class="connections-container">
        {% if node.connections %}
        <div class="connections-outgoing">
        <h3 class="connections-title">Outgoing</h3>
        <ul>
            {% for _, connection in node.connections %}
            {% if connection.detached %}
            {% continue %}
            {% endif %}
            <li>
            <a href="/node/{{connection.to}}">{{connection.to}}</a>
            </li>
            {% endfor %}
            {% for _, connection in node.connections %}
            {% if not connection.detached %}
            {% continue %}
            {% endif %}
            <li>
            <span class="detached-connection">{{connection.to}}</span>
            </li>
            {% endfor %}
        </ul>
        </div>
        {% endif %}
        {% if incoming %}
        <div class="connections-incoming">
        <h3>Incoming</h3>
        <ul>
            {% for connection in incoming %}
            <li>
            <a href="/node/{{connection.from}}">{{connection.from}}</a>
            </li>
            {% endfor %}
        </ul>
        </div>
        {% endif %}
        </div>
    </aside>
    {% endif %}
{%- endblock body %}