{% extends 'generic/object_detail.html' %}
{% load helpers %}
{% load static %}

{% block content_left_page %}
<script src="{% static 'clipboard.js-2.0.9/clipboard.min.js' %}"></script>
<script>    
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function (e) {});
    clipboard.on('error', function (e) {});
</script>
<style>
    #config-output pre {
        white-space: pre-wrap;       /* CSS 2.1 */
        white-space: -moz-pre-wrap;  /* Firefox < 3.5 */
        white-space: -pre-wrap;      /* Opera 4-6 */
        white-space: -o-pre-wrap;    /* Opera 7 */
        word-wrap: break-word;       /* IE >= 5.5 */
    }
</style>
    <div id="config-output" class="panel panel-default">
        <div class="panel-heading">
            <strong>Details</strong>
        </div>
        <table class="table table-hover panel-body attr-table">
            <tr>
                <td>Device Name</td>
                <td>{{ object.device|hyperlinked_object }}</td>
            </tr>
            <tr>
                <td>Feature</td>
                <td>{{ object.rule.feature|hyperlinked_object }}</td>
            </tr>
            <tr>
                <td>Compliance Status</td>
                <td>
                {% if object.compliance %}
                    <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
                {% else %}
                    <span class="text-danger"><i class="mdi mdi-close"></i></span>
                {% endif %}
                </td>
            </tr>
            <tr>
                <td>Actual Configuration</td>
                <td>
                    <pre id="actual_config">{{ object.actual }}</pre>
                    {% include "nautobot_golden_config/include/span_button.html" with target="actual_config" %}
                </td>
            </tr>
            <tr>
                <td>Intended Configuration</td>
                <td>
                    <pre id="intended_config">{{ object.intended }}</pre>
                    {% include "nautobot_golden_config/include/span_button.html" with target="intended_config" %}
                </td>
            </tr>
            <tr>
                <td>Extra Configuration</td>
                <td>
                    <pre id="extra_config">{{ object.extra }}</pre>
                    {% include "nautobot_golden_config/include/span_button.html" with target="extra_config" %}
                </td>
            </tr>
            <tr>
                <td>Missing Configuration</td>
                <td>
                    <pre id="missing_config">{{ object.missing }}</pre>
                    {% include "nautobot_golden_config/include/span_button.html" with target="missing_config" %}
                </td>
            </tr>
            <tr>
                <td>Remediating Configuration</td>
                <td>
                    <pre id="remediation_config">{{ object.remediation }}</pre>
                    {% include "nautobot_golden_config/include/span_button.html" with target="remediation_config" %}
                </td>
            </tr>
            <tr>
                <td>Ordered</td>
                <td>
                {% if object.ordered %}
                    <span class="text-success"><i class="mdi mdi-check-bold"></i></span>
                {% else %}
                    <span class="text-danger"><i class="mdi mdi-close"></i></span>
                {% endif %}
                </td>
            </tr>
        </table>
    </div>
    {% include 'inc/custom_fields_panel.html' %}
    {% include 'inc/relationships_panel.html' %}
{% endblock %}