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

{% block title %}{{ device }} - Config{% endblock %}

{% block content %}
    {% include 'inc/ajax_loader.html' %}
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading"><strong>Device Configuration</strong></div>
                <div class="panel-body">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#running" aria-controls="running" role="tab" data-toggle="tab">Running</a></li>
                        <li role="presentation"><a href="#startup" aria-controls="startup" role="tab" data-toggle="tab">Startup</a></li>
                        <li role="presentation"><a href="#candidate" aria-controls="candidate" role="tab" data-toggle="tab">Candidate</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="running">
                            <pre id="running_config"></pre>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="startup">
                            <pre id="startup_config"></pre>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="candidate">
                            <pre id="candidate_config"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
        url: "{% url 'dcim-api:device-napalm' pk=device.pk %}?method=get_config",
        dataType: 'json',
        success: function(json) {
            $('#running_config').html($.trim(json['get_config']['running']));
            $('#startup_config').html($.trim(json['get_config']['startup']));
            $('#candidate_config').html($.trim(json['get_config']['candidate']));
        },
        error: function(xhr) {
            alert(xhr.responseText);
        }
    });
});
</script>
{% endblock %}