{% extends 'generic/object_retrieve.html' %}

{% block title %}{{ object }} - 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 content %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: "{% url 'dcim-api:device-napalm' pk=object.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 javascript %}