{% load helpers %}
{% load i18n %}

<div class="card">
    <div class="card-header">
        <div class="float-md-end">
            {% if not termination and perms.circuits.add_circuittermination %}
                <a href="{% url 'circuits:circuittermination_add' %}?circuit={{ object.pk }}&term_side={{ side }}&return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-success lh-1">
                    <span class="mdi mdi-plus-thick" aria-hidden="true"></span> {% trans "Add" %}
                </a>
            {% endif %}
            {% if termination and perms.circuits.change_circuittermination %}
                <a href="{% url 'circuits:circuittermination_edit' pk=termination.pk %}?return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-warning lh-1">
                    <span class="mdi mdi-pencil" aria-hidden="true"></span> {% trans "Edit" %}
                </a>
                <a href="{% url 'circuits:circuit_terminations_swap' pk=object.pk %}?return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-primary lh-1">
                    <span class="mdi mdi-swap-vertical" aria-hidden="true"></span> {% trans "Swap" %}
                </a>
            {% endif %}
            {% if termination and perms.circuits.delete_circuittermination %}
                <a href="{% url 'circuits:circuittermination_delete' pk=termination.pk %}?return_url={{ object.get_absolute_url }}" class="btn btn-sm btn-danger lh-1">
                    <span class="mdi mdi-trash-can-outline" aria-hidden="true"></span> {% trans "Delete" %}
                </a>
            {% endif %}
        </div>
        <h5>{% blocktrans %}Termination {{ side }}{% endblocktrans %}</h5>
    </div>
    <div class="card-body">
      {% if termination %}
        <table class="table table-hover attr-table">
          {% if termination.site %}
            <tr>
              <td>{% trans "Site" %}</td>
              <td>
                {% if termination.site.region %}
                  {{ termination.site.region|linkify }} /
                {% endif %}
                {{ termination.site|linkify }}
              </td>
            </tr>
            <tr>
              <td>{% trans "Termination" %}</td>
              <td>
                {% if termination.mark_connected %}
                  <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
                  <span class="text-muted">{% trans "Marked as connected" %}</span>
                {% elif termination.cable %}
                  <a class="d-block d-md-inline" href="{{ termination.cable.get_absolute_url }}">{{ termination.cable }}</a> {% trans "to" %}
                  {% for peer in termination.link_peers %}
                    {% if peer.device %}
                      {{ peer.device|linkify }}<br/>
                    {% elif peer.circuit %}
                      {{ peer.circuit|linkify }}<br/>
                    {% endif %}
                    {{ peer|linkify }}{% if not forloop.last %},{% endif %}
                  {% endfor %}
                  <div class="mt-1">
                    <a href="{% url 'circuits:circuittermination_trace' pk=termination.pk %}" class="btn btn-primary btn-sm lh-1" title="{% trans "Trace" %}">
                      <i class="mdi mdi-transit-connection-variant" aria-hidden="true"></i> {% trans "Trace" %}
                    </a>
                    {% if perms.dcim.change_cable %}
                      <a href="{% url 'dcim:cable_edit' pk=termination.cable.pk %}?return_url={{ termination.circuit.get_absolute_url }}" title="{% trans "Edit cable" %}" class="btn btn-warning btn-sm">
                        <i class="mdi mdi-ethernet-cable" aria-hidden="true"></i> {% trans "Edit" %}
                      </a>
                    {% endif %}
                    {% if perms.dcim.delete_cable %}
                      <a href="{% url 'dcim:cable_delete' pk=termination.cable.pk %}?return_url={{ termination.circuit.get_absolute_url }}" title="{% trans "Remove cable" %}" class="btn btn-danger btn-sm lh-1">
                        <i class="mdi mdi-ethernet-cable-off" aria-hidden="true"></i> {% trans "Disconnect" %}
                      </a>
                    {% endif %}
                  </div>
                {% elif perms.dcim.add_cable %}
                  <div class="dropdown">
                    <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="mdi mdi-ethernet-cable" aria-hidden="true"></span> {% trans "Connect" %}
                    </button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=circuits.circuittermination&a_terminations={{ termination.pk }}&b_terminations_type=dcim.interface&return_url={{ object.get_absolute_url }}">{% trans "Interface" %}</a></li>
                      <li><a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=circuits.circuittermination&a_terminations={{ termination.pk }}&b_terminations_type=dcim.frontport&return_url={{ object.get_absolute_url }}">{% trans "Front Port" %}</a></li>
                      <li><a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=circuits.circuittermination&a_terminations={{ termination.pk }}&b_terminations_type=dcim.rearport&return_url={{ object.get_absolute_url }}">{% trans "Rear Port" %}</a></li>
                      <li><a class="dropdown-item" href="{% url 'dcim:cable_add' %}?a_terminations_type=circuits.circuittermination&a_terminations={{ termination.pk }}&b_terminations_type=circuits.circuittermination&return_url={{ object.get_absolute_url }}">{% trans "Circuit Termination" %}</a></li>
                    </ul>
                  </div>
                {% endif %}
              </td>
            </tr>
          {% else %}
            <tr>
              <td>{% trans "Provider Network" %}</td>
              <td>{{ termination.provider_network.provider|linkify }} / {{ termination.provider_network|linkify }}</td>
            </tr>
          {% endif %}
            <tr>
                <td>{% trans "Speed" %}</td>
                <td>
                {% if termination.port_speed and termination.upstream_speed %}
                    <i class="mdi mdi-arrow-down-bold" title="{% trans "Downstream" %}"></i> {{ termination.port_speed|humanize_speed }} &nbsp;
                    <i class="mdi mdi-arrow-up-bold" title="{% trans "Upstream" %}"></i> {{ termination.upstream_speed|humanize_speed }}
                {% elif termination.port_speed %}
                    {{ termination.port_speed|humanize_speed }}
                {% else %}
                    {{ ''|placeholder }}
                {% endif %}
                </td>
            </tr>
            <tr>
                <td>{% trans "Cross-Connect" %}</td>
                <td>{{ termination.xconnect_id|placeholder }}</td>
            </tr>
            <tr>
                <td>{% trans "Patch Panel/Port" %}</td>
                <td>{{ termination.pp_info|placeholder }}</td>
            </tr>
            <tr>
                <td>{% trans "Description" %}</td>
                <td>{{ termination.description|placeholder }}</td>
            </tr>
            <tr>
              <td>{% trans "Tags" %}</td>
              <td>
                {% for tag in termination.tags.all %}
                  {% tag tag %}
                {% empty %}
                  {{ ''|placeholder }}
                {% endfor %}
              </td>
            </tr>
          {% for group_name, fields in termination.get_custom_fields_by_group.items %}
            <tr>
              <td colspan="2">
                <strong>{{ group_name|default:"Custom Fields" }}</strong>
              </td>
            </tr>
            {% for field, value in fields.items %}
              <tr>
                <th scope="row">{{ field }}
                  {% if field.description %}
                    <i
                      class="mdi mdi-information text-primary"
                      data-bs-toggle="tooltip"
                      data-bs-placement="right"
                      title="{{ field.description|escape }}"
                    ></i>
                 {% endif %}
                </th>
                <td>
                  {% customfield_value field value %}
                </td>
              </tr>
            {% endfor %}
          {% endfor %}
        </table>
    {% else %}
        <span class="text-muted">{% trans "None" %}</span>
    {% endif %}
    </div>
</div>