{% extends 'generic/object.html' %}
{% load helpers %}
{% load plugins %}
{% load i18n %}
{% load static %}

{% block content %}
{% if trace_data_list %}
<link rel="stylesheet" href="{% static 'netbox_wdm/css/channel-trace.css' %}">
<div class="row mb-3">
    <div class="col">
        <div class="card">
            <h5 class="card-header">
                {% trans "Wavelength Path Trace" %}
                {% with trace_data_list.0 as td %}
                <span class="badge text-bg-primary ms-2">{{ td.wavelength_nm }} nm</span>
                {% if td.is_active %}
                <span class="badge text-bg-success ms-1">{% trans "Active" %}</span>
                {% endif %}
                {% if td.is_complete %}
                <span class="badge text-bg-info ms-1">{% trans "Complete" %}</span>
                {% endif %}
                {% endwith %}
            </h5>
            <div class="card-body p-0">
                <div id="channel-trace-container" class="wdm-trace-container" style="height: 600px;"></div>
                <div id="channel-trace-tooltip" class="wdm-trace-tooltip"></div>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="alert alert-info">
    {% trans "This channel is not part of a discovered wavelength path." %}
</div>
{% endif %}
{% endblock %}

{% block javascript %}
{{ block.super }}
{% if trace_data_list %}
<script>
window.CHANNEL_TRACE_DATA_LIST = {{ trace_data_list_json|safe }};
</script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="{% static 'netbox_wdm/dist/channel-trace.min.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.renderChannelTrace(
        '#channel-trace-container',
        '#channel-trace-tooltip',
        window.CHANNEL_TRACE_DATA_LIST
    );
});
</script>
{% endif %}
{% endblock %}