{% extends 'generic/object_edit.html' %}
{% load static %}
{% load form_helpers %}

{% block title %}{{ obj.circuit.provider }} {{ obj.circuit }} - Side {{ form.term_side.value }}{% endblock %}

{% block form %}
  <div class="field-group my-5">
    <div class="row mb-2">
      <h5 class="offset-sm-3">Circuit Termination</h5>
    </div>
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label text-lg-end">Provider</label>
        <div class="col">
            <input class="form-control" value="{{ obj.circuit.provider }}" disabled />
        </div>
    </div>
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label text-lg-end">Circuit</label>
        <div class="col">
            <input class="form-control" value="{{ obj.circuit.cid }}" disabled />
        </div>
    </div>
    <div class="row mb-3">
        <label class="col-sm-3 col-form-label text-lg-end">Termination</label>
        <div class="col">
            <input class="form-control" value="{{ form.term_side.value }}" disabled />
        </div>
    </div>
    {% render_field form.mark_connected %}
    {% with providernetwork_tab_active=form.initial.provider_network %}
      <div class="row mb-2">
        <div class="offset-sm-3">
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link{% if not providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-target="#site" data-bs-toggle="tab">Site</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link{% if providernetwork_tab_active %} active{% endif %}" role="tab" type="button" data-bs-toggle="tab" data-bs-target="#providernetwork">Provider Network</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="tab-content p-0 border-0">
        <div class="tab-pane{% if not providernetwork_tab_active %} active{% endif %}" id="site">
          {% render_field form.region %}
          {% render_field form.site_group %}
          {% render_field form.site %}
        </div>
        <div class="tab-pane{% if providernetwork_tab_active %} active{% endif %}" id="providernetwork">
          {% render_field form.provider_network %}
        </div>
      </div>
    {% endwith %}
  </div>

  <div class="field-group my-5">
    <div class="row mb-2">
      <h5 class="offset-sm-3">Termination Details</h5>
    </div>
    {% render_field form.port_speed %}
    {% render_field form.upstream_speed %}
    {% render_field form.xconnect_id %}
    {% render_field form.pp_info %}
    {% render_field form.description %}
  </div>
{% endblock %}

{# Override buttons block, 'Create & Add Another'/'_addanother' is not needed on a circuit. #}
{% block buttons %}
    <a class="btn btn-outline-danger" href="{{ return_url }}">Cancel</a>
    {% if obj.pk %}
        <button type="submit" name="_update" class="btn btn-primary">
            Save
        </button>
    {% else %}
        <button type="submit" name="_create" class="btn btn-primary">
            Create
        </button>
    {% endif %}
{% endblock buttons %}