{% extends 'dcim/device/base.html' %}
{% load static %}
{% load helpers %}
{% load i18n %}

{% block title %}{% trans "Splice Editor" %}: {{ device }}{% endblock %}

{% block head %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'netbox_fms/css/splice_editor.css' %}">
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col col-md-12">
        <div class="card">
            <h5 class="card-header d-flex justify-content-between align-items-center">
                <span>
                    {% trans "Splice Editor" %}{% if plan %} &mdash; {{ plan.name }}{% endif %}
                </span>
                {% if plan %}
                <span class="badge bg-{{ plan.status }}">{{ plan.get_status_display }}</span>
                {% endif %}
            </h5>
            <div class="card-body p-0">
                {% if plan %}
                    {% include "netbox_fms/inc/splice_editor_widget.html" with back_url=plan.get_absolute_url back_label="Plan Details" %}
                {% else %}
                    {% include "netbox_fms/inc/splice_editor_widget.html" %}
                {% endif %}
            </div>
        </div>
    </div>
</div>
<script>
    window.SPLICE_EDITOR_CONFIG = {
        deviceId: {{ device.pk }},
        planId: {{ plan.pk|default:"null" }},
        contextMode: "{{ context_mode }}",
        planStatus: "{{ plan.status|default:'' }}",
        strandsUrl: "{% url 'plugins-api:netbox_fms-api:closure_strands' device_id=device.pk %}",
        bulkUpdateUrl: {% if plan %}"{% url 'plugins-api:netbox_fms-api:spliceplan-bulk-update-entries' pk=plan.pk %}"{% else %}null{% endif %},
        quickAddFormUrl: "{% url 'plugins:netbox_fms:spliceplan_quick_add_form' %}?closure_id={{ device.pk }}",
        quickAddApiUrl: "{% url 'plugins-api:netbox_fms-api:spliceplan-quick-add' %}",
        csrfToken: "{{ csrf_token }}",
    };
</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="{% static 'netbox_fms/dist/splice-editor.min.js' %}"></script>
{% endblock %}