Pretty-up cable trace template

netbox/templates/dcim/cable_trace.html

@@ -48,21 +48,50 @@
                 {% endif %}
             </div>
         </div>
-        {% if not forloop.last %}<hr />{% endif %}
+        <hr />
     {% endfor %}
     <div class="row">
-        <div class="col-md-11 col-md-offset-1">
-            {% if split_ends %}
-                <h3 class="text-danger text-center"><i class="fa fa-warning"></i> Trace Split</h3>
-                <p>Select a termination to continue:</p>
-                <ul>
-                    {% for termination in split_ends %}
-                        <li><a href="{% url 'dcim:frontport_trace' pk=termination.pk %}">{{ termination.parent }} / {{ termination }}</a></li>
-                    {% endfor %}
-                </ul>
-            {% else %}
+        {% if split_ends %}
+            <div class="col-md-7 col-md-offset-3">
+                <div class="panel panel-warning">
+                    <div class="panel-heading">
+                        <strong><i class="fa fa-warning"></i> Trace Split</strong>
+                    </div>
+                    <div class="panel-body">
+                        There are multiple possible paths from this point. Select a port to continue.
+                    </div>
+                </div>
+                <div class="panel panel-default">
+                    <table class="panel-body table">
+                        <thead>
+                            <tr class="table-headings">
+                                <th>Port</th>
+                                <th>Connected</th>
+                                <th>Type</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        {% for termination in split_ends %}
+                            <tr>
+                                <td><a href="{% url 'dcim:frontport_trace' pk=termination.pk %}">{{ termination }}</a></td>
+                                <td>
+                                    {% if termination.cable %}
+                                        <i class="fa fa-check text-success" title="Yes"></i>
+                                    {% else %}
+                                        <i class="fa fa-times text-danger" title="No"></i>
+                                    {% endif %}
+                                </td>
+                                <td>{{ termination.get_type_display }}</td>
+                                <td>{{ termination.description|placeholder }}</td>
+                            </tr>
+                        {% endfor %}
+                    </table>
+                </div>
+            </div>
+        {% else %}
+            <div class="col-md-11 col-md-offset-1">
                 <h3 class="text-success text-center">Trace completed!</h3>
-            {% endif %}
-        </div>
+            </div>
+        {% endif %}
     </div>
 {% endblock %}