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

{% block title %}Connect {{ form.instance.termination_a.device }} {{ form.instance.termination_a }} to {{ termination_b_type|bettertitle }}{% endblock %}

{% block content %}
{% with termination_a=form.instance.termination_a %}
{% render_errors form %}
<form method="post">
    {% csrf_token %}
    {% for field in form.hidden_fields %}
        {{ field }}
    {% endfor %}
    <div class="row my-3">
        <div class="col-md-5">
            <div class="card h-100">
                <h5 class="card-header">
                    A Side
                </h5>
                <div class="card-body">
                    {% if termination_a.device %}
                        {# Device component #}
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.device.site.region }}" disabled />
                            <label>Region</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.device.site }}" disabled />
                            <label>Site</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.device.rack|default:"None" }}" disabled />
                            <label>Rack</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.device }}" disabled />
                            <label>Device</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a|meta:"verbose_name"|capfirst }}" disabled />
                            <label>Type</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a }}" disabled />
                            <label>Name</label>
                        </div>
                    {% else %}
                        {# Circuit termination #}
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.site }}" disabled />
                            <label>Site</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.circuit.provider }}" disabled />
                            <label>Provider</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.circuit.cid }}" disabled />
                            <label>Circuit</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input class="form-control" value="{{ termination_a.term_side }}" disabled />
                            <label>Side</label>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
            <i class="mdi mdi-swap-horizontal-bold mdi-48px"></i>
        </div>
        <div class="col-md-5">
            <div class="card h-100">
                <h5 class="card-header">
                    B Side
                </h5>
                <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_region' in form.fields %}
                        {% render_field form.termination_b_region %}
                    {% endif %}
                    {% if 'termination_b_site' in form.fields %}
                        {% render_field form.termination_b_site %}
                    {% 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_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 %}
                    <div class="form-floating mb-3">
                        <input class="form-control" value="{{ termination_b_type|capfirst }}" disabled />
                        <label>Type</label>
                    </div>
                    {% render_field form.termination_b_id %}
                </div>
            </div>
        </div>
    </div>
    <div class="row my-3 justify-content-center">
        <div class="col-md-8">
            {% include 'dcim/inc/cable_form.html' %}
        </div>
    </div>
    <div class="row my-3">
        <div class="col-md-12 text-center">
            <a href="{{ return_url }}" class="btn btn-outline-danger">Cancel</a>
            <button type="submit" name="_update" class="btn btn-primary">Connect</button>
        </div>
    </div>
</form>
{% endwith %}
{% endblock %}