{% extends 'base.html' %}
{% load buttons %}
{% load helpers %}
{% load json_helpers %}
{% load static %}

{% block content %}
<style>
    pre {
        font-size: 10px;
        display: inline-block;
    }
    #content table, th, td {
        border: 1px solid lightgray;
        border-collapse: collapse;
    }
    #content th, td {
        min-width: 200px;
        width: 100%;
        padding: 15px;
        height:max-content;
    }
    span.config_hover_button {
        vertical-align: center;
        display: none;
    }

    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;
    }
    a, a:hover{
        text-decoration: none;
        color: white;
    }
    td a {
        text-align: center;
        display:block;
        width:100%;
    }
    #navigation td:hover{
        transform: scale(1.1);
    }
</style>
<h1>{% block title %}Configuration Compliance - {{ device.name }}{% endblock %}</h1>
{% 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_filter_report' pk=device.pk compliance='compliant' %}" class="btn btn-success">Compliant</a> 
            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_filter_report' pk=device.pk compliance='non-compliant' %}" class="btn btn-danger">Non-Compliant</a>
            <a href="{% url 'plugins:nautobot_golden_config:configcompliance_devicedetail' pk=device.pk %}" 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>{{ item.rule.feature.name|upper }}</strong></div>
        <table id="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">
                    <span id="{{ item.rule|slugify }}_actual"><pre>{{ item.actual|placeholder|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 }}_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">
                    <span id="{{ item.rule|slugify }}_intended"><pre>{{ item.intended|placeholder|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 }}_intended">
                            <span class="mdi mdi-content-copy"></span>
                        </button>
                    </span>
                </td>
            </tr>
            <tr>
                <td style="width:250px">Actual Configuration</td>
                <td class="config_hover">
                    <span id="{{ item.rule|slugify }}_actual"><pre>{{ item.actual|placeholder|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 }}_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 != None %}
        <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 %}
<!-- TODO: This should come from the extends base, need to figure out why still required -->
{% block javascript %}
<script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function (e) {
        console.log(e);
    });

    clipboard.on('error', function (e) {
        console.log(e);
    });
</script>
{% endblock %}