{% extends 'base.html' %}

{% block header %}
<div class="pull-right noprint">
    <a href="{% url 'plugins:netbox_virtual_circuit_plugin:virtual_circuit_add' %}?vcid={{ virtual_circuit.vcid }}&name={{ virtual_circuit.name }}&status={{ virtual_circuit.status }}&context={{ virtual_circuit.context }}" class="btn btn-success">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
        Clone
    </a>
    <a href="{% url 'plugins:netbox_virtual_circuit_plugin:virtual_circuit_edit' pk=virtual_circuit.vcid %}" class="btn btn-warning">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        Edit
    </a>
    <a href="{% url 'plugins:netbox_virtual_circuit_plugin:virtual_circuit_delete' pk=virtual_circuit.vcid %}" class="btn btn-danger">
        <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        Delete
    </a>
</div>
{% endblock %}

{% block content %}
{% with config=settings.PLUGINS_CONFIG.netbox_virtual_circuit_plugin %}
    <h1>Virtual Circuit {{ virtual_circuit.vcid }} ({{ virtual_circuit.name }})</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-default">
                <table class="table table-hover panel-body attr-table">
                    <tr style="background-color:#f8f8f8;">
                        <th>Virtual Circuit</th>
                        <th></th>
                    </tr>
                    <tr>
                        <td>VCID</td>
                        <td>{{ virtual_circuit.vcid }}</td>
                    </tr>
                    <tr>
                        <td>Name</td>
                        <td>{{ virtual_circuit.name }}</td>
                    </tr>
                    <tr>
                        <td>Status</td>
                        <td>{{ virtual_circuit.get_status_display }}</td>
                    </tr>
                    <tr>
                        <td>Context</td>
                        <td>{{ virtual_circuit.context }}</td>
                    </tr>
                    <tr>
                        <td>Description</td>
                        <td>{{ virtual_circuit.description }}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-md-8">
            <div class="panel panel-default">
                <table class="table table-hover panel-body attr-table">
                    <tr style="background-color:#f8f8f8;">
                        <th>VLAN</th>
                        <th>Status</th>
                        <th>Device</th>
                        <th>Interface</th>
                    </tr>
                    {% for vlan in vlans %}
                    <tr>
                        <td><a href="{% url 'ipam:vlan_list' %}{{ vlan.pk }}">{{ vlan.vid }} ({{ vlan.name }})</a></td>
                        <td><span class="label label-{{ vlan.get_status_class }}">{{ vlan.get_status_display }}</span></td>
                        <!-- NOTE: get only the first member due to Vapor's specific use case -->
                        <td><a href="{% url 'dcim:device_list' %}{{ vlan.get_interfaces.0.parent.id }}">{{ vlan.get_interfaces.0.parent }}</a></td>
                        <td><a href="{% url 'dcim:interface_list' %}{{ vlan.get_interfaces.0.id }}">{{ vlan.get_interfaces.0 }}</a></td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td class="text-muted">No VLAN has been assigned yet!</td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                {% endfor %}
                </table>
            </div>
            <div class="pull-right noprint">
                <a href="{% url 'plugins:netbox_virtual_circuit_plugin:virtual_circuit_vlan_add' %}?virtual_circuit={{ virtual_circuit.vcid }}" class="btn btn-primary btn-xs">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    Assign a VLAN
                </a>
            </div>
        </div>
    </div>
{% endwith %}
{% endblock %}