{% extends 'generic/object.html' %}
{% block content %}
  {% spaceless %}
    <div class="row mb-3">

      {# Left column #}
      <div class="col col-md-6">

        <div class="card">
          <h5 class="card-header">Service CoreLink</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Name</th>
              <td>{{ object.name }}</td>
            </tr>
            <tr>
              <th scope="row">Status</th>
              <td>{% badge object.get_status_display bg_color=object.get_status_color %}</td>
            </tr>
            <tr>
              <th scope="row">Active</th>
              <td>{% if object.active %}
                    <span class="text-success">&#10003;</span>
                  {% else %}
                    <span class="text-danger">&#10007;</span>
                  {% endif %}
              </td>
            </tr>
            <tr>
              <th scope="row">Tenant</th>
              <td>{{ object.tenant|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Monitored</th>
              <td>{% if object.monitored %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">Service Start</th>
              <td>{{ object.service_start|date:"Y-m-d H:i"|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Service End</th>
              <td>{{ object.service_end|date:"Y-m-d H:i"|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">RT Tickets</th>
              <td>{{ object.rt|default:"—" }}</td>
            </tr>
          </table>
        </div>

        <div class="card mt-3">
          <h5 class="card-header">Topology</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">Node A</th>
              <td>{{ object.node_a|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Physical Interface A</th>
              <td>{{ object.phy_if_a|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Node B</th>
              <td>{{ object.node_b|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">Physical Interface B</th>
              <td>{{ object.phy_if_b|linkify|default:"—" }}</td>
            </tr>
          </table>
        </div>

        {% if object.core_trunks.all %}
          <div class="card mt-3">
            <h5 class="card-header">Core Trunks</h5>
            <table class="table table-hover">
              <thead><tr><th>Trunk</th></tr></thead>
              <tbody>
                {% for trunk in object.core_trunks.all %}
                  <tr><td>{{ trunk|linkify }}</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}

        {% if object.saps.all %}
          <div class="card mt-3">
            <h5 class="card-header">SAPs</h5>
            <table class="table table-hover">
              <thead><tr><th>Interface</th><th>Device</th></tr></thead>
              <tbody>
                {% for sap in object.saps.all %}
                  <tr>
                    <td>{{ sap|linkify }}</td>
                    <td>{{ sap.device|linkify }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}

        {% include 'inc/panels/custom_fields.html' %}
        {% include 'inc/panels/comments.html' %}
      </div>

      {# Right column #}
      <div class="col col-md-6">

        <div class="card">
          <h5 class="card-header">L2 / Encapsulation</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">LLDP Enabled</th>
              <td>{% if object.lldp_enable %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">Flowspec Enabled</th>
              <td>{% if object.flowspec_enable %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">Encapsulation Mode</th>
              <td>{% badge object.get_encapsulation_mode_display bg_color=object.get_encapsulation_mode_color %}</td>
            </tr>
            <tr>
              <th scope="row">QinQ S-VLAN ID</th>
              <td>{{ object.encapsulation_qinq_s_vlan_id|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">QinQ C-VLAN ID</th>
              <td>{{ object.encapsulation_qinq_c_vlan_id|default:"—" }}</td>
            </tr>
          </table>
        </div>

        <div class="card mt-3">
          <h5 class="card-header">Routing</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">ISIS Enabled</th>
              <td>{% if object.routing_isis_enabled %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">ISIS Instance</th>
              <td>{{ object.routing_isis_instance|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">ISIS BFD</th>
              <td>{% if object.routing_isis_bfd %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">OSPF Enabled</th>
              <td>{% if object.routing_ospf_enable %}Yes{% else %}No{% endif %}</td>
            </tr>
            <tr>
              <th scope="row">OSPF Area</th>
              <td>{{ object.routing_ospf_area|default:"—" }}</td>
            </tr>
          </table>
        </div>

        <div class="card mt-3">
          <h5 class="card-header">IP Addresses</h5>
          <table class="table table-hover attr-table">
            <tr>
              <th scope="row">IPv4 Address A</th>
              <td>{{ object.ipv4_addr_a|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">IPv4 Address B</th>
              <td>{{ object.ipv4_addr_b|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">IPv6 Address A</th>
              <td>{{ object.ipv6_addr_a|linkify|default:"—" }}</td>
            </tr>
            <tr>
              <th scope="row">IPv6 Address B</th>
              <td>{{ object.ipv6_addr_b|linkify|default:"—" }}</td>
            </tr>
          </table>
        </div>

        {% if object.linked_segments.all %}
          <div class="card mt-3">
            <h5 class="card-header">Linked Segments</h5>
            <table class="table table-hover">
              <thead><tr><th>Segment</th></tr></thead>
              <tbody>
                {% for seg in object.linked_segments.all %}
                  <tr><td>{{ seg|linkify }}</td></tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% endif %}

        {% include 'inc/panels/tags.html' %}
      </div>

    </div>
  {% endspaceless %}
{% endblock content %}