{% extends "base.html" %}

{% block title %}{{ title }}{% endblock title %}

{%- block body %}
    <section>
        <h1>{{ title }}</h1>
        <code style="display: inline;">ID: {{ id }}</code>
        {% for line in body | split(pat="\n") %}
        {% if line %} <p>{{ line }}</p> {% endif %}
        {% endfor %}
    </section>
    {% if connections or incoming %}
    <aside>
        <hr>
        <h2>Connections</h2>
        {% if connections %}
        <ul>
            {% for connection in connections | filter(attribute="detached", value=false) %}
            <li>
            <strong>{{id}}</strong>
            &#x1f86a;
            <a href="/node/{{connection.to}}">{{connection.to}}</a>
            </li>
            {% endfor %}
            {% for connection in connections | filter(attribute="detached", value=true) %}
            <li>
            <strong>{{id}}</strong>
            &#x1f86a;
            <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>
            &#x1F868;
            <a href="/node/{{connection.from}}">{{connection.from}}</a>
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </aside>
    {% else %}
    <em>Node has no connections.</em>
    {% endif %}
{%- endblock body %}