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

{% block title %}{% trans "Splice Editor" %}: {{ object }}{% 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" %} &mdash; {{ object.name }}</span>
                <span class="badge bg-{{ object.status }}">{{ object.get_status_display }}</span>
            </h5>
            <div class="card-body p-0">
                {% include "netbox_fms/inc/splice_editor_widget.html" with back_url=object.get_absolute_url back_label="Back to Plan" %}
            </div>
        </div>
    </div>
</div>
<script>
    window.SPLICE_EDITOR_CONFIG = {
        deviceId: {{ object.closure_id }},
        planId: {{ object.pk }},
        contextMode: "plan-edit",
        planStatus: "{{ object.status }}",
        strandsUrl: "{% url 'plugins-api:netbox_fms-api:closure_strands' device_id=object.closure_id %}",
        bulkUpdateUrl: "{% url 'plugins-api:netbox_fms-api:spliceplan-bulk-update-entries' pk=object.pk %}",
        quickAddFormUrl: "",
        quickAddApiUrl: "",
        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 %}