{% extends 'base.html' %}
{% load buttons %}

{% block content %}
{% include "nautobot_golden_config/dff2html_base.html" %}
<style>
    .d2h-tag {
        display: none;
    }
    .d2h-file-collapse {
        display:none;
    } 
</style>
{% if config_type == "sotagg" %}
    <h1>Aggregate Data - {{ device_name }}</h1>
{% elif config_type in "compliance,json_compliance" %}
    <h1>Compliance Details - {{ device_name }}</h1>
{% elif config_type == "backup" %}
    <h1>Backup Configuration Details - {{ device_name }}</h1>
{% else %}
    <h1>Intended Configuration Details - {{ device_name }}</h1>
{% endif %}
    <div class="panel panel-default" style="padding-bottom: 5px">
        <div style="padding-left: 10px">
            {% if config_type == "sotagg" and format == 'yaml' %}
                <div class="panel-heading"><strong>Output</strong>
                    {% include include_file %}
                </div>
                <pre>{{ output }}</pre>
            {% elif  config_type == "sotagg" and format == 'json' %}
                <div class="panel-heading"><strong>Output</strong>
                    {% include include_file %}
                </div>
                <pre>{{ output }}</pre>
            {% elif config_type in "compliance,json_compliance" %}
                <div id="output", value="{{ output }}"></div>
                <div id="diff"></div>
            {% else %}
                <pre>{{ output }}</pre>
            {% endif %}
        </div>
    </div>
    <script type="text/javascript">
        var str_input = document.getElementById("output").getAttribute("value");
        document.addEventListener('DOMContentLoaded', () => {
            var diffHtml = Diff2Html.html(str_input, {
                drawFileList: true,
                matching: 'lines',
                outputFormat: 'side-by-side',
            });
        document.getElementById('diff').innerHTML = diffHtml;
    });
    </script>
{% endblock %}