{% extends 'dcim/device/base.html' %}
{% load static %}

{% block title %}{{ object }} - LLDP Neighbors{% endblock %}

{% block head %}
<script type="text/javascript" src="{% static 'lldp.js' %}" onerror="window.location='{% url 'media_failure' %}?filename=lldp.js'"></script>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-overlay">
            <div class="spinner-border" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
        <div class="card-header">
            <h5 class="d-inline">LLDP Neighbors</h5>
            {% comment %} <div id="spinner-container" class="float-end"></div> {% endcomment %}
        </div>
        <div class="card-body">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Interface</th>
                        <th>Configured Device</th>
                        <th>Configured Interface</th>
                        <th>LLDP Device</th>
                        <th>LLDP Interface</th>
                    </tr>
                </thead>
                <tbody>
                    {% for iface in interfaces %}
                        <tr id="{{ iface.name }}">
                            <td class="font-monospace">{{ iface }}</td>
                            {% if iface.connected_endpoint.device %}
                                <td class="configured_device" data="{{ iface.connected_endpoint.device }}" data-chassis="{{ iface.connected_endpoint.device.virtual_chassis.name }}">
                                    <a href="{% url 'dcim:device' pk=iface.connected_endpoint.device.pk %}">{{ iface.connected_endpoint.device }}</a>
                                </td>
                                <td class="configured_interface" data="{{ iface.connected_endpoint }}">
                                    <span title="{{ iface.connected_endpoint.get_type_display }}">{{ iface.connected_endpoint }}</span>
                                </td>
                            {% elif iface.connected_endpoint.circuit %}
                                {% with circuit=iface.connected_endpoint.circuit %}
                                    <td colspan="2">
                                        <i class="mdi mdi-lightning-bolt" title="Circuit"></i>
                                        <a href="{{ circuit.get_absolute_url }}">{{ circuit.provider }} {{ circuit }}</a>
                                    </td>
                                {% endwith %}
                            {% else %}
                                <td class="text-muted" colspan="2">None</td>
                            {% endif %}
                            <td class="device"></td>
                            <td class="interface"></td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}

{% block data %}
<span data-object-url="{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_lldp_neighbors_detail"></span>
{% endblock %}