{% extends "dcim/device.html" %}
{% load helpers %}
{% load json_helpers %}
{% load static %}

{% block title %} {{ object }} - Config Compliance {% endblock %}

{% block extra_styles %}
{{ block.super }}
<style>
    #compliance-content pre {
        font-size: 10px;
        display: inline-block;
    }
    #compliance-content table, th, td {
        border: 1px solid lightgray;
        border-collapse: collapse;
    }
    #compliance-content th, td {
        min-width: 200px;
        width: 100%;
        padding: 15px;
        height: max-content;
    }
    #compliance-content td.config_hover span[id*="_intended"] pre {
        max-height: 300px;
    }
    #compliance-content td.config_hover span[id*="_actual"] pre {
        max-height: 300px;
    }
    #navigation span.config_hover_button {
        vertical-align: center;
        display: none;
    }
    #navigation td.config_hover:hover span.config_hover_button {
        display: inline;
    }
    #navigation table {
        border: 3px solid white;
        border-collapse: collapse;
    }
    #navigation td {
        color: white;
        border:3px solid white;
        width:400px;
        height:20px;
        padding:10px;
        transition: transform 0.5s;
    }
    #navigation tr:first-child {
        border-radius: 0.6em 0 0 0;
    }
    #navigation a, #navigation a:hover{
        text-decoration: none;
        color: white;
    }
    #navigation td a {
        text-align: center;
        display:block;
        width:100%;
    }
    #navigation td:hover{
        transform: scale(1.1);
    }
</style>
{% endblock extra_styles %}

{% block content %}
{% block navigation %}
<div class="panel panel-default" style="width:100%">
        <div class="panel-heading"><strong>Feature Navigation</strong>
            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=compliant" class="btn btn-success">Compliant</a>
            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}&compliance=non-compliant" class="btn btn-danger">Non-Compliant</a>
            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicetab' pk=device.pk %}?tab={{ active_tab }}" class="btn btn-info">Clear</a>
        </div>
    <div id="navigation">
        <table>
            <tr>
            {% for item in compliance_details %}
                {% if item.compliance %}
                    <td style="background-color: #5cb85c;">
                {% else %}
                    <td style="background-color: #d9534f;">
                {% endif %}
                    <a href="#{{ item.rule }}">
                        {{ item.rule }}
                    </a>
                </td>
                {% if forloop.counter|divisibleby:"5" %}
                    </tr>
                    <tr>
                {% endif %}
            {% endfor %}
            </tr>
        </table>
    </div>
</div>
{% endblock %}
{% for item in compliance_details %}
    <div id="{{ item.rule }}" class="panel panel-default" style="width:100%">
        <div class="panel-heading"><strong><a href="{% url 'plugins:nautobot_golden_config:configcompliance' pk=item.pk %}">{{ item.rule.feature.name|upper }}</a></strong></div>
        <table id="compliance-content">
        <tr>
            <td style="width:250px">Status</td>
            {% if item.rule.config_ordered %}
                {% if item.compliance %}
                    <td><span class="label label-success">Compliant</span> <span><i class="mdi mdi-sort" title="Ordered Configuration Test"></i></span></td>
                {% else %}
                    <td><span class="label label-danger">Non-Compliant</span> <span><i class="mdi mdi-sort" title="Ordered Configuration Test"></i></span></td>
                {% endif %}
            {% else %}
                {% if item.compliance %}
                    <td><span class="label label-success">Compliant</span> <span><i class="mdi mdi-swap-vertical" title="Unordered Configuration Test"></i></span></td>
                {% else %}
                    <td><span class="label label-danger">Non-Compliant</span> <span><i class="mdi mdi-swap-vertical" title="Unordered Configuration Test"></i></span></td>
                {% endif %}
            {% endif %}

        </tr>
        {% if item.ordered %}
            <tr>
                <td style="width:250px">Configuration</td>
                <td class="config_hover">
                    {% if item.rule.config_type == "xml" %}
                        <span id="{{ item.rule|slugify }}_actual"><pre><code class="language-xml">{{ item.actual|placeholder }}</code></pre></span>
                    {% elif item.rule.config_type == "json" %}
                        <span id="{{ item.rule|slugify }}_actual"><pre><code class="language-json">{{ item.actual|placeholder|condition_render_json }}</code></pre></span>
                    {% else %}
                        <span id="{{ item.rule|slugify }}_actual"><pre>{{ item.actual|placeholder }}</pre></span>
                    {% endif %}
                    <span class="config_hover_button">
                        <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_actual">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
        {% else %}
            <tr>
                <td style="width:250px">Intended Configuration</td>
                <td class="config_hover">
                    {% if item.rule.config_type == "xml" %}
                        <span id="{{ item.rule|slugify }}_intended"><pre><code class="language-xml">{{ item.intended|placeholder }}</code></pre></span>
                    {% elif item.rule.config_type == "json" %}
                        <span id="{{ item.rule|slugify }}_intended"><pre><code class="language-json">{{ item.intended|placeholder|condition_render_json }}</code></pre></span>
                    {% else %}
                        <span id="{{ item.rule|slugify }}_intended"><pre>{{ item.intended|placeholder }}</pre></span>
                    {% endif %}
                    <span class="config_hover_button">
                        <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_intended">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width:250px">Actual Configuration</td>
                <td class="config_hover">
                    {% if item.rule.config_type == "xml" %}
                        <span id="{{ item.rule|slugify }}_actual"><pre><code class="language-xml">{{ item.actual|placeholder }}</code></pre></span>
                    {% elif item.rule.config_type == "json" %}
                        <span id="{{ item.rule|slugify }}_actual"><pre><code class="language-json">{{ item.actual|placeholder|condition_render_json }}</code></pre></span>
                    {% else %}
                        <span id="{{ item.rule|slugify }}_actual"><pre>{{ item.actual|placeholder }}</pre></span>
                    {% endif %}
                    <span class="config_hover_button">
                        <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_actual">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
        {% endif %}
        {% if item.missing != "" %}
            <tr>
                <td style="color:red;width:250px">Missing Configuration</td>
                <td class="config_hover">
                    <span id="{{ item.rule|slugify }}_missing"><pre>{{ item.missing|condition_render_json }}</pre></span>
                    <span class="config_hover_button">
                        <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_missing">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
        {% endif %}
        {% if item.extra != "" %}
            <tr>
                <td style="color:red;width:250px">Extra Configuration</td>
                <td class="config_hover">
                    <span id="{{ item.rule|slugify }}_extra"><pre>{{ item.extra|condition_render_json }}</pre></span>
                    <span class="config_hover_button">
                        <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_extra">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
        {% endif %}
        {% if item.remediation != "" %}
        <tr>
            <td style="color:red;width:250px">Remediating Configuration</td>
            <td class="config_hover">
                <span id="{{ item.rule|slugify }}_remediation"><pre>{{ item.remediation|condition_render_json }}</pre></span>
                <span class="config_hover_button">
                    <button class="btn btn-inline btn-default hover_copy_button" data-clipboard-target="#{{ item.rule|slugify }}_remediation">
                        <span class="mdi mdi-content-copy"></span>
                    </button>
                </span>
            </td>
        </tr>
    {% endif %}
    </table>
    </div>
{% endfor %}
{% endblock %}