Detect detached connections and render them differently

templates/node.html

@@ -16,13 +16,20 @@
         <h2>Connections</h2>
         {% if connections %}
         <ul>
-            {% for connection in connections %}
+            {% 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>

templates/tree.html

@@ -60,7 +60,9 @@
         <li><strong>Connections</strong>
             <ul>
             {% for connection in node.connections %}
+            {% if not connection.detached %}
                 <li><a href="/node/{{connection.to}}">{{connection.to}}</a></li>
+            {% endif %}
             {% endfor %}
             </ul>
         </li>