{% 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>{{ device.name }}</h6>
    {% if device.role %}
    <span class="badge bg-secondary">{{ device.role }}</span>
    {% endif %}
    <table class="table table-sm trace-detail-table mt-3">
        <tr><th>{% trans "Site" %}</th><td>{% if device.site %}{{ device.site.name }}{% else %}&mdash;{% endif %}</td></tr>
        <tr><th>{% trans "Location" %}</th><td>{% if device.location %}{{ device.location }}{% else %}&mdash;{% endif %}</td></tr>
        <tr><th>{% trans "Device Type" %}</th><td>{{ device.device_type }}</td></tr>
        <tr><th>{% trans "Role" %}</th><td>{% if device.role %}{{ device.role }}{% else %}&mdash;{% endif %}</td></tr>
    </table>
    <div class="mt-3">
        <a href="{{ device.get_absolute_url }}" class="btn btn-sm btn-outline-primary">{% trans "View Device" %} <i class="mdi mdi-open-in-new"></i></a>
        {% if has_splice_plans %}
        <a href="{{ device.get_absolute_url }}splice-editor/" class="btn btn-sm btn-outline-info">{% trans "Splice Editor" %} <i class="mdi mdi-open-in-new"></i></a>
        {% endif %}
    </div>
    <div class="trace-loss-summary mt-4 pt-3 border-top">
        <small class="text-muted">{% trans "Path Loss" %}: {% with loss=path.get_calculated_loss_db %}{% if loss is not None %}{{ loss }} dB{% else %}&mdash;{% endif %}{% endwith %} {% if path.wavelength_nm %}@ {{ path.wavelength_nm }} nm{% endif %} &middot; {% if path.is_complete %}{% trans "Complete" %}{% else %}{% trans "Incomplete" %}{% endif %}</small>
    </div>
</div>