{% extends "base.html" %}

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

{%- block body %}
    <section>
        <h1>{{ title }}</h1>
        <code style="display: inline;">ID: {{ id }}</code>
        {{ text | safe }}
    </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>
    {% endif %}
{%- endblock body %}