{% load i18n %}
{% load helpers %}
<div class="trace-detail-header">
    <button class="btn btn-sm btn-outline-secondary trace-back-btn" onclick="TraceView.deselectNode()">
        <i class="mdi mdi-arrow-left"></i> {% trans "Back" %}
    </button>
</div>
<div class="trace-detail-body">
    <h6>{{ port.name }}</h6>
    <span class="badge bg-success">{% trans "Port" %}</span>
    <table class="table table-sm trace-detail-table mt-3">
        <tr><th>{% trans "Device" %}</th><td>{{ port.device }}</td></tr>
        <tr><th>{% trans "Type" %}</th><td>{{ port.get_type_display }}</td></tr>
        {% if strand %}
        <tr><th>{% trans "Strand Position" %}</th><td>{{ strand.position }}</td></tr>
        <tr><th>{% trans "Strand Color" %}</th><td><span style="display:inline-block;width:12px;height:12px;background:#{{ strand.color }};border:1px solid #ccc;border-radius:2px;vertical-align:middle;"></span> {{ strand.color }}</td></tr>
        {% if strand.buffer_tube %}
        <tr><th>{% trans "Tube" %}</th><td><span style="display:inline-block;width:12px;height:12px;background:#{{ strand.buffer_tube.color }};border:1px solid #ccc;border-radius:2px;vertical-align:middle;"></span> {{ strand.buffer_tube.name }}</td></tr>
        {% endif %}
        {% endif %}
    </table>
    <div class="mt-3">
        <a href="{{ port.get_absolute_url }}" class="btn btn-sm btn-outline-primary">{% trans "View Port" %} <i class="mdi mdi-open-in-new"></i></a>
    </div>
</div>