{% 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">
                <span class="label id-label">ID: {{ node.id }}</span>
                {% if node.hidden %}<span class="label hidden-label">Hidden</span>{% endif %}
            </div>
        </div>
        {{ text | safe }}
    </section>
    {% if node.connections or incoming %}
    <aside>
        <hr>
        <h2>Connections</h2>
        {% if node.connections %}
        <ul>
            {% for connection in node.connections | filter(attribute="detached", value=false) %}
            <li>
            <strong>{{node.id}}</strong>
            &raquo;
            <a href="/node/{{connection.to}}">{{connection.to}}</a>
            </li>
            {% endfor %}
            {% for connection in node.connections | filter(attribute="detached", value=true) %}
            <li>
            <strong>{{node.id}}</strong>
            &raquo;
            <span style="filter: opacity(70%);">{{connection.to}}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <em>No outgoing connections.</em>
        {% endif %}
        {% if incoming %}
        <h3>Incoming connections</h3>
        <ul>
            {% for connection in incoming %}
            <li>
            <strong>{{connection.to}}</strong>
            &laquo;
            <a href="/node/{{connection.from}}">{{connection.from}}</a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </aside>
    {% endif %}
{%- endblock body %}