{% extends 'base.html' %}
{% load static %}
{% load helpers %}
{% load form_helpers %}

{% block title %}
    {% with termination_a=form.instance.termination_a %}
        {% if termination_a.module %}
            Connect {{ termination_a.module.display }} {{ termination_a }} to {{ termination_b_type|bettertitle }}
        {% else %}
            Connect {{ termination_a.device }} {{ termination_a }} to {{ termination_b_type|bettertitle }}
        {% endif %}
    {% endwith %}
{% endblock %}

{% block content %}
    <form method="post" class="h-100 vstack">
        {% csrf_token %}
        {% for field in form.hidden_fields %}
            {{ field }}
        {% endfor %}
        <div class="row">
            {% if form.non_field_errors %}
                <div class="card border-danger">
                    <div class="card-header bg-danger-subtle border-danger text-body">
                        <strong>Errors</strong>
                    </div>
                    <div class="card-body">
                        {{ form.non_field_errors }}
                    </div>
                </div>
            {% endif %}
            {% with termination_a=form.instance.termination_a %}
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-header">
                            <strong>A Side</strong>
                        </div>
                        <div class="card-body">
                            {% if termination_a.device %}
                            {# Device component #}
                                {% include "inc/form_static_field.html" with label="Location" value=termination_a.device.location required=True %}
                                {% include "inc/form_static_field.html" with label="Rack" value=termination_a.device.rack|default:"None" required=True %}
                                {% include "inc/form_static_field.html" with label="Device" value=termination_a.device required=True %}
                                {% include "inc/form_static_field.html" with label="Type" value=termination_a|meta:"verbose_name"|bettertitle required=True %}
                                {% include "inc/form_static_field.html" with label="Name" value=termination_a required=True %}
                            {% elif termination_a.module %}
                            {# Module component #}
                                {% if not termination_a.module.device %}
                                    <div class="alert alert-warning">
                                        This {{ termination_a|meta:"verbose_name"|bettertitle }} belongs
                                        to a module not installed in any device.
                                    </div>
                                    {% include "inc/form_static_field.html" with label="Location" value=termination_a.module.location required=True %}
                                {% else %}
                                    {% include "inc/form_static_field.html" with label="Location" value=termination_a.module.device.location required=True %}
                                    {% include "inc/form_static_field.html" with label="Rack" value=termination_a.module.device.rack|default:"None" required=True %}
                                    {% include "inc/form_static_field.html" with label="Device" value=termination_a.module.device required=True %}
                                    {% include "inc/form_static_field.html" with label="Module" value=termination_a.module.display required=True %}
                                {% endif %}
                                {% include "inc/form_static_field.html" with label="Type" value=termination_a|meta:"verbose_name"|bettertitle required=True %}
                                {% include "inc/form_static_field.html" with label="Name" value=termination_a required=True %}
                            {% else %}
                            {# Circuit termination #}
                                {% include "inc/form_static_field.html" with label="Location" value=termination_a.location required=True %}
                                {% include "inc/form_static_field.html" with label="Provider" value=termination_a.circuit.provider required=True %}
                                {% include "inc/form_static_field.html" with label="Circuit" value=termination_a.circuit.cid required=True %}
                                {% include "inc/form_static_field.html" with label="Side" value=termination_a.term_side required=True %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 hstack justify-content-center my-16">
                    <span aria-hidden="true" class="mdi mdi-swap-horizontal-bold mdi-48px"></span>
                </div>
                <div class="col-lg-5">
                    <div class="card">
                        <div class="card-header text-center">
                            <strong>B Side</strong>
                        </div>
                        <div class="card-body">
                            {% if tabs %}
                                <ul class="nav nav-tabs">
                                    {% for url, link in tabs %}
                                        <li class="nav-item" role="presentation"><a class="nav-link" href="{{ url }}">{{ link }}</a></li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                            {% if 'termination_b_provider' in form.fields %}
                                {% render_field form.termination_b_provider %}
                            {% endif %}
                            {% if 'termination_b_location' in form.fields %}
                                {% render_field form.termination_b_location %}
                            {% endif %}
                            {% if 'termination_b_rackgroup' in form.fields %}
                                {% render_field form.termination_b_rackgroup %}
                            {% endif %}
                            {% if 'termination_b_rack' in form.fields %}
                                {% render_field form.termination_b_rack %}
                            {% endif %}
                            {% if 'termination_b_device' in form.fields %}
                                {% render_field form.termination_b_device %}
                            {% endif %}
                            {% if 'termination_b_module' in form.fields %}
                                {% render_field form.termination_b_module %}
                            {% endif %}
                            {% if 'termination_b_type' in form.fields %}
                                {% render_field form.termination_b_type %}
                            {% endif %}
                            {% if 'termination_b_powerpanel' in form.fields %}
                                {% render_field form.termination_b_powerpanel %}
                            {% endif %}
                            {% if 'termination_b_circuit' in form.fields %}
                                {% render_field form.termination_b_circuit %}
                            {% endif %}
                            {% include "inc/form_static_field.html" with label="Type" value=termination_b_type|bettertitle required=True %}
                            {% render_field form.termination_b_id %}
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 offset-lg-3">
                    {% include 'dcim/inc/cable_form.html' %}
                </div>
            {% endwith %}
        </div>
        <div class="nb-form-sticky-footer">
            <button type="submit" name="_update" class="btn btn-primary">
                <span aria-hidden="true" class="mdi mdi-check me-4"></span><!--
            -->Connect
            </button>
            <a href="{{ return_url }}" class="btn btn-secondary">
                <span aria-hidden="true" class="mdi mdi-close me-4"></span><!--
            -->Cancel
            </a>
        </div>
    </form>
{% endblock %}

{% block javascript %}
    {{ block.super }}
    <script>
        $(() => {
            $("{{ js_select_onchange_query }}").on("change", () => {
            /*
            * This clears the list of cable destination choices when any of the termination_b drop-downs
            * (except the name/id drop-down) is changed.
            * */
                $('#id_termination_b_id').find("option").remove();
            });
        });

    // clear the select2 widget for the module when a new device is selected
    // jQuery required for select2
        document.addEventListener("DOMContentLoaded", function() {
            $('select#id_termination_b_device').on('change', function (e) {
                $('select#id_termination_b_module').val(null).trigger('change');
            });
        });
    </script>
{% endblock %}