{% 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 "Circuit Trace" %}
                <span class="badge text-bg-primary ms-2">{{ trace_data_list|length }} {% trans "path(s)" %}</span>
            </h5>
            <div class="card-body p-0">
                <div id="circuit-trace-container" class="wdm-trace-container" style="height: 700px;"></div>
                <div id="circuit-trace-tooltip" class="wdm-trace-tooltip"></div>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="alert alert-info">
    {% trans "This circuit has no wavelength paths assigned." %}
</div>
{% endif %}
{% endblock %}

{% block javascript %}
{{ block.super }}
{% if trace_data_list %}
<script>
window.CIRCUIT_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(
        '#circuit-trace-container',
        '#circuit-trace-tooltip',
        window.CIRCUIT_TRACE_DATA_LIST
    );
});
</script>
{% endif %}
{% endblock %}