{% extends '_base.html' %}
{% load static from staticfiles %}
{% load helpers %}

{% block title %}{{ device }}{% endblock %}

{% block content %}
{% include 'dcim/inc/device_header.html' with active_tab='info' %}
<div class="row">
	<div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Device</strong>
            </div>
            <table class="table table-hover panel-body attr-table">
                <tr>
                    <td>Site</td>
                    <td>
                        {% if device.site.region %}
                            <a href="{{ device.site.region.get_absolute_url }}">{{ device.site.region }}</a>
                            <i class="fa fa-angle-right"></i>
                        {% endif %}
                        <a href="{% url 'dcim:site' slug=device.site.slug %}">{{ device.site }}</a>
                    </td>
                </tr>
                <tr>
                    <td>Rack</td>
                    <td>
                        {% if device.rack %}
                            {% if device.rack.group %}
                                <a href="{{ device.rack.group.get_absolute_url }}">{{ device.rack.group.name }}</a>
                                <i class="fa fa-angle-right"></i>
                            {% endif %}
                            <a href="{% url 'dcim:rack' pk=device.rack.pk %}">{{ device.rack.name }}</a>{% if device.rack.facility_id %} ({{ device.rack.facility_id }}){% endif %}
                        {% else %}
                            <span class="text-muted">None</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Position</td>
                    <td>
                        {% if device.parent_bay %}
                            {% with device.parent_bay.device as parent %}
                                <a href="{{ parent.get_absolute_url }}">{{ parent }}</a> <i class="fa fa-angle-right"></i> {{ device.parent_bay.name }}
                                {% if parent.position %}
                                    (U{{ parent.position }} / {{ parent.get_face_display }})
                                {% endif %}
                            {% endwith %}
                        {% elif device.rack and device.position %}
                            <span>U{{ device.position }} / {{ device.get_face_display }}</span>
                        {% elif device.rack and device.device_type.u_height %}
                            <span class="label label-warning">Not racked</span>
                        {% else %}
                            <span class="text-muted">N/A</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Tenant</td>
                    <td>
                        {% if device.tenant %}
                            {% if device.tenant.group %}
                                <a href="{{ device.tenant.group.get_absolute_url }}">{{ device.tenant.group.name }}</a>
                                <i class="fa fa-angle-right"></i>
                            {% endif %}
                            <a href="{{ device.tenant.get_absolute_url }}">{{ device.tenant }}</a>
                        {% else %}
                            <span class="text-muted">None</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Device Type</td>
                    <td>
                        <span><a href="{% url 'dcim:devicetype' pk=device.device_type.pk %}">{{ device.device_type.full_name }}</a> ({{ device.device_type.u_height }}U)</span>
                    </td>
                </tr>
                <tr>
                    <td>Serial Number</td>
                    <td>
                        {% if device.serial %}
                            <span>{{ device.serial }}</span>
                        {% else %}
                            <span class="text-muted">N/A</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Asset Tag</td>
                    <td>
                        {% if device.asset_tag %}
                            <span>{{ device.asset_tag }}</span>
                        {% else %}
                            <span class="text-muted">N/A</span>
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Management</strong>
            </div>
            <table class="table table-hover panel-body attr-table">
                <tr>
                    <td>Role</td>
                    <td>
                        <a href="{{ device.device_role.get_absolute_url }}">{{ device.device_role }}</a>
                    </td>
                </tr>
                <tr>
                    <td>Platform</td>
                    <td>
                        {% if device.platform %}
                            <span>{{ device.platform }}</span>
                        {% else %}
                            <span class="text-muted">None</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Status</td>
                    <td>
                        <span class="label label-{{ device.get_status_class }}">{{ device.get_status_display }}</span>
                    </td>
                </tr>
                <tr>
                    <td>Primary IPv4</td>
                    <td>
                        {% if device.primary_ip4 %}
                            <a href="{% url 'ipam:ipaddress' pk=device.primary_ip4.pk %}">{{ device.primary_ip4.address.ip }}</a>
                            {% if device.primary_ip4.nat_inside %}
                                <span>(NAT for {{ device.primary_ip4.nat_inside.address.ip }})</span>
                            {% elif device.primary_ip4.nat_outside %}
                                <span>(NAT: {{ device.primary_ip4.nat_outside.address.ip }})</span>
                            {% endif %}
                        {% else %}
                            <span class="text-muted">N/A</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <td>Primary IPv6</td>
                    <td>
                        {% if device.primary_ip6 %}
                            <a href="{% url 'ipam:ipaddress' pk=device.primary_ip6.pk %}">{{ device.primary_ip6.address.ip }}</a>
                            {% if device.primary_ip6.nat_inside %}
                                <span>(NAT for {{ device.primary_ip6.nat_inside.address.ip }})</span>
                            {% elif device.primary_ip6.nat_outside %}
                                <span>(NAT: {{ device.primary_ip6.nat_outside.address.ip }})</span>
                            {% endif %}
                        {% else %}
                            <span class="text-muted">N/A</span>
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
        {% with device.get_custom_fields as custom_fields %}
            {% include 'inc/custom_fields_panel.html' %}
        {% endwith %}
        {% if request.user.is_authenticated %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Secrets</strong>
                </div>
                {% if secrets %}
                    <table class="table table-hover panel-body">
                        {% for secret in secrets %}
                            {% include 'secrets/inc/secret_tr.html' %}
                        {% endfor %}
                    </table>
                {% else %}
                    <div class="panel-body text-muted">
                        None found
                    </div>
                {% endif %}
                {% if perms.secrets.add_secret %}
                    <form id="secret_form">
                        {% csrf_token %}
                    </form>
                    <div class="panel-footer text-right">
                        <a href="{% url 'dcim:device_addsecret' pk=device.pk %}" class="btn btn-xs btn-primary">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                            Add secret
                        </a>
                    </div>
                {% endif %}
            </div>
        {% endif %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Services</strong>
            </div>
            {% if services %}
                <table class="table table-hover panel-body">
                    {% for service in services %}
                        {% include 'dcim/inc/service.html' %}
                    {% endfor %}
                </table>
            {% else %}
                <div class="panel-body text-muted">
                    None
                </div>
            {% endif %}
            {% if perms.ipam.add_service %}
                <div class="panel-footer text-right">
                    <a href="{% url 'dcim:service_assign' device=device.pk %}" class="btn btn-xs btn-primary">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Assign service
                    </a>
                </div>
            {% endif %}
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Console / Power</strong>
            </div>
            <table class="table table-hover panel-body component-list">
                {% for cp in console_ports %}
                    {% include 'dcim/inc/consoleport.html' %}
                {% empty %}
                    {% if device.device_type.console_port_templates.exists %}
                        <tr>
                            <td colspan="6" class="alert-warning">
                                <i class="fa fa-fw fa-warning"></i> No console ports defined
                                {% if perms.dcim.add_consoleport %}
                                    <a href="{% url 'dcim:consoleport_add' pk=device.pk %}" class="btn btn-primary btn-xs pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
                {% for pp in power_ports %}
                    {% include 'dcim/inc/powerport.html' %}
                {% empty %}
                    {% if device.device_type.power_port_templates.exists %}
                        <tr>
                            <td colspan="6" class="alert-warning">
                                <i class="fa fa-fw fa-warning"></i> No power ports defined
                                {% if perms.dcim.add_powerport %}
                                    <a href="{% url 'dcim:powerport_add' pk=device.pk %}" class="btn btn-primary btn-xs pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endif %}
                {% endfor %}
            </table>
            {% if perms.dcim.add_interface or perms.dcim.add_consoleport or perms.dcim.add_powerport %}
                <div class="panel-footer text-right">
                    {% if perms.dcim.add_consoleport %}
                        <a href="{% url 'dcim:consoleport_add' pk=device.pk %}" class="btn btn-xs btn-primary">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add console port
                        </a>
                    {% endif %}
                    {% if perms.dcim.add_powerport %}
                        <a href="{% url 'dcim:powerport_add' pk=device.pk %}" class="btn btn-xs btn-primary">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power port
                        </a>
                    {% endif %}
                </div>
            {% endif %}
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Comments</strong>
            </div>
            <div class="panel-body">
                {% if device.comments %}
                    {{ device.comments|gfm }}
                {% else %}
                    <span class="text-muted">None</span>
                {% endif %}
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Images</strong>
            </div>
            {% include 'inc/image_attachments.html' with images=device.images.all %}
            {% if perms.extras.add_imageattachment %}
                <div class="panel-footer text-right">
                    <a href="{% url 'dcim:device_add_image' object_id=device.pk %}" class="btn btn-primary btn-xs">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                        Attach an image
                    </a>
                </div>
            {% endif %}
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <strong>Related Devices</strong>
            </div>
            {% if related_devices %}
                <table class="table table-hover panel-body">
                    {% for rd in related_devices %}
                        <tr>
                            <td>
                                <a href="{% url 'dcim:device' pk=rd.pk %}">{{ rd }}</a>
                            </td>
                            <td>
                                {% if rd.rack %}
                                    <a href="{% url 'dcim:rack' pk=rd.rack.pk %}">Rack {{ rd.rack }}</a>
                                {% else %}
                                    <span class="text-muted">&mdash;</span>
                                {% endif %}
                            </td>
                            <td>{{ rd.device_type.full_name }}</td>
                        </tr>
                    {% endfor %}
                </table>
            {% else %}
                <div class="panel-body text-muted">None found</div>
            {% endif %}
        </div>
	</div>
	<div class="col-md-7">
        {% if device_bays or device.device_type.is_parent_device %}
            {% if perms.dcim.delete_devicebay %}
                <form method="post" action="{% url 'dcim:devicebay_bulk_delete' pk=device.pk %}">
                {% csrf_token %}
            {% endif %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Device Bays</strong>
                    <div class="pull-right">
                        {% if perms.dcim.change_devicebay and device_bays|length > 1 %}
                            <button class="btn btn-default btn-xs toggle">
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_devicebay and device_bays|length > 10 %}
                            <a href="{% url 'dcim:devicebay_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add device bays
                            </a>
                        {% endif %}
                    </div>
                </div>
                <table class="table table-hover panel-body component-list">
                    {% for devicebay in device_bays %}
                        {% include 'dcim/inc/devicebay.html' with selectable=True %}
                    {% empty %}
                        <tr>
                            <td colspan="4">No device bays defined</td>
                        </tr>
                    {% endfor %}
                </table>
                {% if perms.dcim.add_devicebay or perms.dcim.delete_devicebay %}
                    <div class="panel-footer">
                        {% if device_bays and perms.dcim.delete_devicebay %}
                            <button type="submit" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete selected
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_devicebay %}
                            <div class="pull-right">
                                <a href="{% url 'dcim:devicebay_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add device bays
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        {% endif %}
                     </div>
                {% endif %}
            </div>
            {% if perms.dcim.delete_devicebay %}
                </form>
            {% endif %}
        {% endif %}
        {% if interfaces or device.device_type.is_network_device %}
            {% if perms.dcim.change_interface or perms.dcim.delete_interface %}
                <form method="post">
                {% csrf_token %}
                <input type="hidden" name="device" value="{{ device.pk }}" />
            {% endif %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Interfaces</strong>
                    <div class="pull-right">
                        <button class="btn btn-default btn-xs toggle-ips" selected="selected">
                            <span class="glyphicon glyphicon-check" aria-hidden="true"></span> Show IPs
                        </button>
                        {% if perms.dcim.change_interface and interfaces|length > 1 %}
                            <button class="btn btn-default btn-xs toggle">
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_interface and interfaces|length > 10 %}
                            <a href="{% url 'dcim:interface_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
                            </a>
                        {% endif %}
                    </div>
                </div>
                <table id="interfaces_table" class="table table-hover panel-body component-list">
                    {% for iface in interfaces %}
                        {% include 'dcim/inc/interface.html' with selectable=True %}
                    {% empty %}
                        <tr>
                            <td colspan="4">No interfaces defined</td>
                        </tr>
                    {% endfor %}
                </table>
                {% if perms.dcim.add_interface or perms.dcim.delete_interface %}
                    <div class="panel-footer">
                        {% if interfaces and perms.dcim.change_interface %}
                            <button type="submit" name="_edit" formaction="{% url 'dcim:interface_bulk_edit' pk=device.pk %}" class="btn btn-warning btn-xs">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit
                            </button>
                        {% endif %}
                        {% if interfaces and perms.dcim.delete_interfaceconnection %}
                            <button type="submit" name="_disconnect" formaction="{% url 'dcim:interface_bulk_disconnect' pk=device.pk %}" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span> Disconnect
                            </button>
                        {% endif %}
                        {% if interfaces and perms.dcim.delete_interface %}
                            <button type="submit" name="_delete" formaction="{% url 'dcim:interface_bulk_delete' pk=device.pk %}" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_interface %}
                            <div class="pull-right">
                                <a href="{% url 'dcim:interface_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add interfaces
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        {% endif %}
                     </div>
                {% endif %}
            </div>
            {% if perms.dcim.delete_interface %}
                </form>
            {% endif %}
        {% endif %}
        {% if cs_ports or device.device_type.is_console_server %}
            {% if perms.dcim.delete_consoleserverport %}
                <form method="post" action="{% url 'dcim:consoleserverport_bulk_delete' pk=device.pk %}">
                {% csrf_token %}
            {% endif %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Console Server Ports</strong>
                    <div class="pull-right">
                        {% if perms.dcim.change_consoleserverport and cs_ports|length > 1 %}
                            <button class="btn btn-default btn-xs toggle">
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_consoleserverport and cs_ports|length > 10 %}
                            <a href="{% url 'dcim:consoleserverport_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add console server ports
                            </a>
                        {% endif %}
                    </div>
                </div>
                <table class="table table-hover panel-body component-list">
                    {% for csp in cs_ports %}
                        {% include 'dcim/inc/consoleserverport.html' with selectable=True %}
                    {% empty %}
                        <tr>
                            <td colspan="4">No console server ports defined</td>
                        </tr>
                    {% endfor %}
                </table>
                {% if perms.dcim.add_consoleserverport or perms.dcim.delete_consoleserverport %}
                    <div class="panel-footer">
                        {% if cs_ports and perms.dcim.change_consoleport %}
                            <button type="submit" name="_disconnect" formaction="{% url 'dcim:consoleserverport_bulk_disconnect' pk=device.pk %}" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span> Disconnect
                            </button>
                        {% endif %}
                        {% if cs_ports and perms.dcim.delete_consoleserverport %}
                            <button type="submit" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_consoleserverport %}
                            <div class="pull-right">
                                <a href="{% url 'dcim:consoleserverport_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add console server ports
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            {% if perms.dcim.delete_consoleserverport %}
                </form>
            {% endif %}
        {% endif %}
        {% if power_outlets or device.device_type.is_pdu %}
            {% if perms.dcim.delete_poweroutlet %}
                <form method="post" action="{% url 'dcim:poweroutlet_bulk_delete' pk=device.pk %}">
                {% csrf_token %}
            {% endif %}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <strong>Power Outlets</strong>
                    <div class="pull-right">
                        {% if perms.dcim.change_poweroutlet and cs_ports|length > 1 %}
                            <button class="btn btn-default btn-xs toggle">
                                <span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span> Select all
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_poweroutlet and power_outlets|length > 10 %}
                            <a href="{% url 'dcim:poweroutlet_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power outlets
                            </a>
                        {% endif %}
                    </div>
                </div>
                <table class="table table-hover panel-body component-list">
                    {% for po in power_outlets %}
                        {% include 'dcim/inc/poweroutlet.html' with selectable=True %}
                    {% empty %}
                        <tr>
                            <td colspan="4">No power outlets defined</td>
                        </tr>
                    {% endfor %}
                </table>
                {% if perms.dcim.add_poweroutlet or perms.dcim.delete_poweroutlet %}
                    <div class="panel-footer">
                        {% if power_outlets and perms.dcim.change_powerport %}
                            <button type="submit" name="_disconnect" formaction="{% url 'dcim:poweroutlet_bulk_disconnect' pk=device.pk %}" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span> Disconnect
                            </button>
                        {% endif %}
                        {% if power_outlets and perms.dcim.delete_poweroutlet %}
                            <button type="submit" class="btn btn-danger btn-xs">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete
                            </button>
                        {% endif %}
                        {% if perms.dcim.add_poweroutlet %}
                            <div class="pull-right">
                                <a href="{% url 'dcim:poweroutlet_add' pk=device.pk %}" class="btn btn-primary btn-xs">
                                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add power outlets
                                </a>
                            </div>
                            <div class="clearfix"></div>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            {% if perms.dcim.delete_poweroutlet %}
                </form>
            {% endif %}
        {% endif %}
	</div>
</div>
{% include 'inc/graphs_modal.html' %}
{% include 'secrets/inc/private_key_modal.html' %}
{% endblock %}

{% block javascript %}
<script type="text/javascript">
function toggleConnection(elem, api_url) {
    var url = netbox_api_path + api_url + elem.attr('data') + "/";
    if (elem.hasClass('connected')) {
        $.ajax({
            url: url,
            method: 'PATCH',
            dataType: 'json',
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            data: {
                'connection_status': 'False'
            },
            context: this,
            success: function() {
                elem.parents('tr').removeClass('success').addClass('info');
                elem.removeClass('connected btn-warning').addClass('btn-success');
                elem.attr('title', 'Mark installed');
                elem.children('i').removeClass('glyphicon glyphicon-ban-circle').addClass('fa fa-plug')
            }
        });
    } else {
        $.ajax({
            url: url,
            method: 'PATCH',
            dataType: 'json',
            beforeSend: function(xhr, settings) {
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            data: {
                'connection_status': 'True'
            },
            context: this,
            success: function() {
                elem.parents('tr').removeClass('info').addClass('success');
                elem.removeClass('btn-success').addClass('connected btn-warning');
                elem.attr('title', 'Mark planned');
                elem.children('i').removeClass('fa fa-plug').addClass('glyphicon glyphicon-ban-circle')
            }
        });
    }
    return false;
}
$(".consoleport-toggle").click(function() {
    return toggleConnection($(this), "dcim/console-ports/");
});
$(".powerport-toggle").click(function() {
    return toggleConnection($(this), "dcim/power-ports/");
});
$(".interface-toggle").click(function() {
    return toggleConnection($(this), "dcim/interface-connections/");
});
// Toggle the display of IP addresses under interfaces
$('button.toggle-ips').click(function() {
    var selected = $(this).attr('selected');
    if (selected) {
        $('#interfaces_table tr.ipaddress').hide();
    } else {
        $('#interfaces_table tr.ipaddress').show();
    }
    $(this).attr('selected', !selected);
    $(this).children('span').toggleClass('glyphicon-check glyphicon-unchecked');
    return false;
});
</script>
<script src="{% static 'js/graphs.js' %}?v{{ settings.VERSION }}"></script>
<script src="{% static 'js/secrets.js' %}?v{{ settings.VERSION }}"></script>
{% endblock %}