{% extends 'base_software.html' %}
{% from 'host/common.html' import edit_field %}

{% from 'conformance/conformance_report_dialog.html' import conformance_report_dialog %}

{% block head %}

<script src="/static/jquery/js/conformance_report_dialog.js"></script>
<script src="/static/jquery/js/select_hosts_by_platform.js"></script>
<script src="/static/jquery/js/select_server_repo.js"></script>
  
<script>

    var use_utc_timezone = "{{ system_option.use_utc_timezone }}" == 'True';

    $(function() {
        var conformance_report_spinner = $('#conformance-report-spinner');
        conformance_report_spinner.hide();

        var msg = $('#import-software-profile-form').data("msg");
            if( msg != '' ) {
                bootbox.alert(msg);
        }

        var selected_tab = $.cookie('conformance-tab') == null ? '#conformance' : $.cookie('conformance-tab');
        $('a[href=' + selected_tab + ']').tab('show');

        $('#conformance-tab').on('shown.bs.tab', function (e) {
            $.cookie('conformance-tab', $('.nav-tabs .active > a').attr('href'));
        });

        var conformance_report_id = $.cookie('conformance-report-id');

        // Use delegate pattern for event
        $("#software-profile-table").on("click", ".data-delete-link", function() {
            var delete_url = $(this).attr('data-delete-url');
            var software_profile_name = $(this).attr('data-delete-profile-name');

            bootbox.confirm("You are about to delete software profile \'" + software_profile_name + "\'.  OK to proceed?", function(result) {
                if (result) {
                    $.ajax({
                        url: delete_url,
                        type: 'DELETE',
                        success: function(result) {
                            if (result.status == 'OK') {
                                software_profile_table.api().ajax.reload();
                            } else {
                                bootbox.alert(result.status);
                            }
                        }
                    });
                }
            });
        });


        $('#assign-software-profile-to-hosts').on('click', function(e) {
            display_assign_software_profile_dialog();
        });

        $('#view-software-profile-assignments').on('click', function(e) {
            display_software_profile_assignments_dialog();
        });


        $('#export').on('click', function(e) {
            id = $('#conformance_reports').val();
            if (id == -1 || id == undefined) {
                bootbox.alert('No conformance report was selected.');
                return;
            }
            
            $('#export-conformance-report-dialog').modal({show:true, backdrop:'static'})
        });
        
        $('#on-export-conformance-report-submit').on('click', function(e) {
            var id = $('#conformance_reports').val();
            var include_host_packages = $("#include-host-packages-yes-or-no .active").data("value");
            var exclude_conforming_hosts = $("#exclude-conforming-hosts-yes-or-no .active").data("value");

            export_conformance_report(id, include_host_packages, exclude_conforming_hosts);
        });
        
        function export_conformance_report(id, include_host_packages, exclude_conforming_hosts) {
            $.ajax({
                url: "/conformance/api/get_conformance_report_datetime/report/" + id,
                dataType: 'json',
                success: function(response) {
                    $.each(response, function(index, element) {
                        window.location.href = '/conformance/api/export_conformance_report/report/' + id + '?locale_datetime=' +
                            getDateStringfromUTCString(element[0].conformance_report_datetime, use_utc_timezone) +
                            '&include_host_packages=' + include_host_packages +
                            '&exclude_conforming_hosts=' + exclude_conforming_hosts;
                    });
                }
            });
        }
        
        $('#rerun-report').on('click', function(e) {
            id = $('#conformance_reports').val();
            if (id == -1 || id == undefined) {
                bootbox.alert('No conformance report was selected.');
                return;
            }
            
            message = "Re-Run will create a new report based on the previously selected report's criteria and hosts.  OK to continue?";
            bootbox.confirm(message, function(result) {
                if (result) {
                    rerun_conformance_report(id);
                }
            }); 
        });

        $('#on-conformance-report-dialog-submit').on('click', function(e) {
            var match_criteria = $("input[name=match_criteria]:checked").val();
            var host_selection_criteria = $("input[name=host_selection_criteria]:checked").val();
            var software_profile_id = software_profile_selector.val();
            var selected_hosts = host_selector.get_selected_items();

            if (host_selection_criteria != "auto" && selected_hosts.length == 0) {
                bootbox.alert("Host has not been specified.");
                return false;
            }

            if (host_selection_criteria == "auto") {
                run_conformance_report_that_match_host_software_profile(software_profile_id, match_criteria);
            } else {
                run_conformance_report(software_profile_id, match_criteria, selected_hosts);
            }
        });

        $('#run-conformance-report').on('click', function(e) {
            display_conformance_report_dialog();
        });

        var software_profile_table = $("#software-profile-table").dataTable({
            "order": [
                [0, "asc"]
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'software_profile_name',
                "render": function(data, type, row) {
                    return '<a href="/conformance/software_profile/' + data + '/edit">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'packages',
                "render": function(data, type, row) {
                    return insert_slider(comma2br(data), row['software_profile_id']);
                }
            }, {
                "targets": 2,
                "data": 'created_by',
            }, {
                "targets": 3,
                "data": 'software_profile_name',
                "render": function(data, type, row) {
                    return '<a class="data-delete-link" href="javascript://"  \
                data-delete-profile-name="' + data + '" \
                data-delete-url="/conformance/software_profile/' + data + '/delete">Delete</a>';
                }
            }],
            "ajax": {
                "url": "{{ url_for('conformance.api_get_software_profiles') }}",
            }
        });

        function insert_slider(packages, id) {
            if (packages != null && packages.length > 0) {
                var html = '<a href="javascript://" data-toggle="collapse" data-target="#toggle' + id + '">' +
                    '<center><img src=\"{{ url_for('static', filename='file_open.png') }}\"></center>' +
                    '</a>' +
                    '<!-- Collapsible Element HTML -->' +
                    '<div id="toggle' + id + '" class="collapse">' +
                    '<div style="white-space: nowrap;">' +packages.replace(/,/g, "<br/>") +
                    '</div>' +
                    '</div>';
                return html;
            } else {
                return '&nbsp;';
            }
        }

        var conformance_report_table = $("#conformance-report-table").dataTable({
            "serverSide": true,
            "order": [
                [0, "asc"]
            ],
            "pageLength": 100,
            "columns": [
                { "data": "hostname" },
                { "data": "software_platform" },
                { "data": "software_version" },
                { "data": "host_packages", "orderable": false },
                { "data": "missing_packages", "orderable": false },
                { "data": "conformed" },
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a href="/host_dashboard/hosts/' + data + '/">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'software_platform'
            }, {
                "targets": 2,
                "data": 'software_version'
            }, {
                "targets": 3,
                "data": 'host_packages',
                "render": function(data, type, row) {
                    if (data.length > 0) {
                        var html_code = '';
                        var array = data.split(',');

                        for (i = 0; i < array.length; i++) {
                            if (array[i].indexOf('matched') > 0) {
                                html_code += '<span style="color:green;">' + array[i] + '</span><br>';
                            } else {
                                html_code += array[i] + '<br>';
                            }
                        }
                        return html_code;
                    }
                    return '';

                }
            }, {
                "targets": 4,
                "data": 'missing_packages',
                "render": function(data, type, row) {                   
                    if (data.length > 0) {
                        return '<span style="color:red;">' + comma2br(data) + '</span>';
                    } else {
                        return '';
                    }
                }
            }, {
                "targets": 5,
                "data": 'conformed',
                "render": function(data, type, row) {
                    return data + ' ' + row['comments'];
                }
            }, {
                "targets": 6,
                "data": 'conformed',
                "render": function(data, type, row) {
                    if (data == 'Yes') {
                        return '(No Action)';
                    } else {
                        return '<button type="button" style="line-height: 10px;" class="btn btn-default make-conform-button" ' +
                            'data-hostname="' + row['hostname'] + '"' +
                            'data-software-platform="' + row['software_platform'] + '"' +
                            'data-software-version="' + row['software_version'] + '"' +
                            'data-missing-packages="' + row['missing_packages'] + '"' +
                            '>Make Conform</button>';
                    }
                }
            }],
            "ajax": {
                "url": "/datatable/api/get_conformance_report/report/0",
            }
        });

        get_conformance_reports();
        
        function get_conformance_reports() {
            $('#conformance_reports').empty();
            $.ajax({
                url: "/conformance/api/get_conformance_report_dates",
                dataType: 'json',
                success: function(response) {
                    $.each(response, function(index, element) {
                        for (i = 0; i < element.length; i++) {
                             $('#conformance_reports').append('<option value="' + element[i].id + '">' + 
                                 getDateStringfromUTCString(element[i].created_time, use_utc_timezone) + ' - ' + element[i].software_profile + '</option>');
                        }
                    });
                    
                    if ($('#conformance_reports').val() > 0) {
                        $('#report-result-panel').show();
                        display_conformance_report($('#conformance_reports').val());
                    } else {
                        $('#report-result-panel').hide();
                    }
                }
            });
        }
        
        $('#conformance_reports').on('change', function(e) {
            display_conformance_report($('#conformance_reports').val());
        });
        
        function display_conformance_report(id) {
            $.cookie('conformance-report-id', id); 

            conformance_report_table.api().ajax.url("/datatable/api/get_conformance_report/report/" + id).load();
            display_conformance_report_summary(id);
            display_conformance_report_software_profile_packages(id)
        }

        function display_conformance_report_software_profile_packages(id) {
            $.ajax({
                url: "/conformance/api/get_conformance_report_software_profile_packages/report/" + id,
                dataType: 'json',
                success: function(response) {
                    var html_code = '<ul>';
                    $.each(response, function(index, element) {
                        for (i = 0; i < element.length; i++) {
                            html_code += '<li>' + element[i].software_profile_package;
                            if (element[i].description.length > 0) {
                                html_code += ' - ' + element[i].description;
                            }
                            html_code += '</li>';
                        }
                    });

                    html_code += '</ul>';

                    $('#software-profile-package-info').html(html_code);
                }
            });
        }
        
        function display_conformance_report_summary(id) {          
            $.ajax({
                url: "/conformance/api/get_conformance_report_summary/report/" + id,
                dataType: 'json',
                success: function(response) {
                    var html_code = '';
                    
                    $.each(response, function(index, element) {
                        html_code = '<b><u>Summary</u></b><br>';
                        html_code += '<b>Total Hosts:</b> ' + element[0].total_hosts + '<br>';
                        html_code += '<b>Match Criteria:</b> ' + element[0].match_criteria + '<br>';

                        $('#header-host-packages').html(element[0].match_criteria);

                        if (element[0].host_not_in_conformance == 0) {
                            html_code += "<img src=\"{{ url_for('static', filename='green_check.png') }}\">&nbsp;All hosts are in complete conformance.<br>";
                        } else {
                            html_code += "<span class='badge alert-danger'>" +
                                element[0].host_not_in_conformance + "</span>&nbsp;&nbsp;" +
                                    (element[0].host_not_in_conformance > 1 ? "hosts are not" : "host is not") +
                                    " in complete conformance (see the 'Missing Packages' column).<br>";
                        }
                        
                        if (element[0].host_out_dated_inventory > 0) {
                            html_code += "<span class='badge alert-danger'>" +
                                element[0].host_out_dated_inventory + "</span>&nbsp;&nbsp;" +
                                (element[0].host_out_dated_inventory > 1 ? "hosts" : "host") +
                                " failed last software inventory retrieval (see '*' in the 'Is Conformed' column).";
                        }
                    });
                    
                    if (html_code != "") {
                        html_code = "<div class='alert alert-warning'>" + html_code + "</div>";
                    }
                    $('#conformance-report-info').html(html_code);
                }
            });
        }

        function run_conformance_report_that_match_host_software_profile(software_profile_id, match_criteria) {
            conformance_report_spinner.show();
            $.ajax({
                url: "/conformance/api/run_conformance_report_that_match_host_software_profile",
                type: "POST",
                dataType: 'json',
                data: { software_profile_id: software_profile_id, match_criteria: match_criteria },
                success: function(response) {
                    if (response.status == 'OK') {
                        get_conformance_reports();
                    } else {
                        bootbox.alert('<img src=\"{{ url_for('static', filename='error.png') }}\">&nbsp;' + response.status);
                    }
                    conformance_report_spinner.hide();
                    bootbox.alert("The Conformance Report has been generated.");
                }
            });
        }
        
        function run_conformance_report(software_profile_id, match_criteria, selected_hosts) {
            conformance_report_spinner.show();
            $.ajax({
                url: "{{ url_for('conformance.api_run_conformance_report') }}",
                type: "POST",
                dataType: 'json',
                data: { software_profile_id: software_profile_id,
                        match_criteria: match_criteria,
                        selected_hosts: selected_hosts
                      },
                success: function(response) {
                    if (response.status == 'OK') {
                        get_conformance_reports();
                    } else {
                        bootbox.alert('<img src=\"{{ url_for('static', filename='error.png') }}\">&nbsp;' + response.status);
                    }
                    conformance_report_spinner.hide();
                    bootbox.alert("The Conformance Report has been generated.");
                }
            });
        }
        
        function rerun_conformance_report(id) {
            conformance_report_spinner.show();
            $.ajax({
                url: "/conformance/api/rerun_conformance_report/report/" + id,
                dataType: 'json',
                success: function(response) {
                    if (response.status == 'OK') {
                        get_conformance_reports();
                    } else {
                        bootbox.alert('<img src=\"{{ url_for('static', filename='error.png') }}\">&nbsp;' + response.status);
                    }
                    conformance_report_spinner.hide();
                    bootbox.alert("The Conformance Report has been generated.");
                }
            });
        }

        $('.btn-toggle').click(function() {
            $(this).find('.btn').toggleClass('active');  
    
            if ($(this).find('.btn-primary').size()>0) {
    	        $(this).find('.btn').toggleClass('btn-primary');
            }
    
            $(this).find('.btn').toggleClass('btn-default');       
        });
        
        $('#include_host_packages').val(function() {
            render_switch(
                $('#include_host_packages'),
                $('#include-host-packages-yes-button'),
                $('#include-host-packages-no-button'));
        });

        $('#exclude_conforming_hosts').val(function() {
            render_switch(
                $('#exclude_conforming_hosts'),
                $('#exclude-conforming-hosts-yes-button'),
                $('#exclude-conforming-hosts-no-button'));
        });

        function render_switch(control, yes_button, no_button) {
            if (control.val() == 'True') {
                yes_button.addClass("btn-primary active");
                no_button.addClass("btn-default");
            } else {
                no_button.addClass("btn-primary active");
                yes_button.addClass("btn-default");
            }
        }

        conformance_report_table.on("click", ".make-conform-button", function() {
            var hostname = $(this).attr('data-hostname');
            var software_platform = $(this).attr('data-software-platform');
            var software_version = $(this).attr('data-software-version');
            var missing_packages = $(this).attr('data-missing-packages');
            display_make_conform_dialog(hostname, software_platform, software_version, missing_packages);
        });

        $('#export-software-profile').on("click", function() {
            export_sw_profiles_table.api().ajax.url("/conformance/api/get_software_profiles").load();
            $('#export-software-profile-dialog').modal({show:true, backdrop:'static'});
        });

        $('#batch-make-conform').on("click", function() {
           display_batch_make_conform_dialog($('#conformance_reports').val());
        });

        $('#export-sw-profiles-check-all').click(function () {
            toggle_check_all(export_sw_profiles_table, this);
        });

        function toggle_check_all(data_table, this_instance) {
            var filtered_rows = data_table.$('tr', {"filter": "applied"});
            for (var i = 0; i < filtered_rows.length; i++) {
              $(filtered_rows[i]).find('.check').prop('checked', this_instance.checked);
            }
        }

        var export_sw_profiles_table = $('#export-sw-profiles-datatable').dataTable({
            "order": [
                [1, "asc"]
            ],
            "pageLength": 100,
            "scrollY": 250,
            "columnDefs": [{
                "sortable": false,
                "targets": 0,
                "data": 'software_profile_name',
                "render": function ( data, type, row ) {
                    return '<center><input type="checkbox" value="' + data + '" class="check" name="profile_names"></center>';
                }
            }, {
                "targets": 1,
                "data" : 'software_profile_name'
            }, {
                "targets": 2,
                "data": 'packages',
                "render": function(data, type, row) {
                    return insert_slider(comma2br(data), 'export-row' + row['software_profile_id']);
                }
            } ]
        });

        $('#on-export-software-profile-submit').on('click', function(e) {
            var software_profile_list = [];
            $('.check').each(function(index) {
                if (this.checked) {
                    software_profile_list.push($(this).val());
                }
            });
            if (software_profile_list == []) {
                return false;
            }

            $('#export-software-profile-form').attr('action', "{{ url_for('conformance.export_software_profiles') }}?software_profile_list[]=" + software_profile_list);
            $('#export-software-profile-form').submit();
        });

        $("#import-software-profile").on("click", function() {
            $('#import-software-profile-dialog').modal({show:true, backdrop:'static'});
        });

        $(document).on('change', '.btn-file :file', function() {
            var input = $(this),
              numFiles = input.get(0).files ? input.get(0).files.length : 1,
              label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
            input.trigger('fileselect', [numFiles, label]);
        });

        $('.btn-file :file').on('fileselect', function(event, numFiles, label) {
            var input = $(this).parents('.input-group').find(':text'),
                log = numFiles > 1 ? numFiles + ' files selected' : label;

            if( input.length ) {
                input.val(log);
            }
        });

        $('#on-import-software-profile-submit').on('click', function() {
            if($('.btn-file :file').val() == ''){
                bootbox.alert("Please choose a file to import.");
                return false;
            }
            $('#import-software-profile-form').submit();
        });

    });

    //--------------------  External Functions --------------------//

    function populate_software_profiles(selector_ui, default_software_profile) {
        selector_ui.empty().append('<option value=""></option>');

        $.ajax({
            url: "{{ url_for('conformance.api_get_software_profiles') }}",
            dataType: 'json',
            success: function(response) {
                $.each(response, function(index, element) {
                    for (i = 0; i < element.length; i++) {
                        selector_ui.append('<option value="' +
                            element[i].software_profile_id + '">' +
                            element[i].software_profile_name + '</option>');
                    }
                });

                if (default_software_profile) {
                    software_profile_selector.val(default_software_profile);
                }
            }
        });
    }
    
</script>

<style>
    .modal-dialog {    
        width: 850px;
    }
    .btn-file {
        position: relative;
        overflow: hidden;
    }
    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        background: red;
        cursor: inherit;
        display: block;
    }
    input[readonly] {
        background-color: white !important;
        cursor: text !important;
    }
</style>

{% endblock head %}
  
{% block main %}

{{ conformance_report_dialog(conformance_report_dialog_form) }}

{% include 'conformance/assign_software_profile_to_hosts_dialog.html' %}
{% include 'conformance/view_software_profile_assignments_dialog.html' %}
{% include 'conformance/make_conform_dialog.html' %}
{% include 'conformance/batch_make_conform_dialog.html' %}

<div id="export-conformance-report-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>A Microsoft Excel compatible file will be generated for the selected conformance report.</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <label class="col-sm-7 control-label">{{ export_conformance_report_form.include_host_packages.label.text }}</label>
                        <div class=col-sm-5>
                            <div class="btn-group btn-toggle" id="include-host-packages-yes-or-no">
                                <button type="button" id="include-host-packages-yes-button" class="btn" data-value=1>Yes</button>
                                <button type="button" id="include-host-packages-no-button" class="btn" data-value=0>No</button>
                            </div>
                        </div>
                        <input class="form-control" id="{{ export_conformance_report_form.include_host_packages.id }}" name="{{ export_conformance_report_form.include_host_packages.id }}" type="hidden" value="{{ export_conformance_report_form.include_host_packages.data }}">
                    </div>

                    <div class="form-group ">
                        <label class="col-sm-7 control-label">{{ export_conformance_report_form.exclude_conforming_hosts.label.text }}</label>
                        <div class=col-sm-5>
                            <div class="btn-group btn-toggle" id="exclude-conforming-hosts-yes-or-no">
                                <button type="button" id="exclude-conforming-hosts-yes-button" class="btn" data-value=1>Yes</button>
                                <button type="button" id="exclude-conforming-hosts-no-button" class="btn" data-value=0>No</button>
                            </div>
                        </div>
                        <input class="form-control" id="{{ export_conformance_report_form.exclude_conforming_hosts.id }}" name="{{ export_conformance_report_form.exclude_conforming_hosts.id }}" type="hidden" value="{{ export_conformance_report_form.exclude_conforming_hosts.data }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">   
                            <button id="on-export-conformance-report-submit" class="btn btn-primary" data-dismiss="modal">OK</button>
                            <button class="btn" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="export-software-profile-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form id="export-software-profile-form" method="post" action="">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>Export Software Profiles</h4>
                </div>
                <div class="modal-body">
                    <table id="export-sw-profiles-datatable">
                        <thead>
                        <tr>
                            <th>
                                <center><input type="checkbox" id="export-sw-profiles-check-all"></center>
                            </th>
                            <th>Profile Name</th>
                            <th>Software Packages</th>
                        </tr>
                        </thead>
                    </table>
                    <div class="wizard-footer">
                        <div align="center">
                            <input id='on-export-software-profile-submit' data-dismiss="modal" type='submit' class='btn btn-fill btn-primary btn-wd btn-sm' value='Export' />
                            <input type="button" id="cancel" class="btn btn-fill btn-wd btn-sm" data-dismiss="modal" value="Cancel" />
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="import-software-profile-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form id="import-software-profile-form" method="post" class="form-horizontal" enctype="multipart/form-data" data-msg="{{ get_flashed_messages(category_filter=['import_feedback'])[0] | nl2br }}">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>Import Software Profiles</h4>
                    The file to be imported must have been exported previously using the Software Profile Export function.
                </div>
                <div class="modal-body">
                    <div class="form-group ">
                        <div class="col-sm-6">
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <span class="btn btn-primary btn-file">
                                        Choose File<input class="form-control" type=file name=file>
                                    </span>
                                </span>
                                <input type="text" class="form-control" readonly>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <input class="btn btn-primary form-control" id="on-import-software-profile-submit" type=submit value=Import>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- Main -->
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="btn-group pull-right">
                <button type="button"  class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Action
                <span class="glyphicon glyphicon-link"></span>
                <span class="caret"></span>
                </button>

                <ul class="dropdown-menu">
                    <li><a href="javascript://" id="assign-software-profile-to-hosts">Assign Software Profile to Hosts</a></li>
                    <li><a href="javascript://" id="view-software-profile-assignments">View Software Profile Assignments</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript://" id="export-software-profile">Export Software Profiles</a></li>
                    <li><a href="javascript://" id="import-software-profile">Import Software Profiles</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <ul class="nav nav-tabs" id="conformance-tab">
                <li><a data-toggle="tab" href="#conformance">Conformance Reports</a></li>
                <li><a data-toggle="tab" href="#software-profiles">Software Profiles</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Create <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a data-toggle="main-tab" href="{{ url_for('conformance.software_profile_create') }}">Software Profile</a></li>
                    </ul>
                </li>
            </ul>
            <div class="tab-content" style="margin-top:10px;">
                <div id="conformance" class="tab-pane fade">
                    <div class="row">
                        <div>
                        {{ edit_field(conformance_form.conformance_reports, label_field_width="col-sm-2", field_width="col-sm-5", class="form-control") }}
                        </div>
                        <div class="btn-group pull-right">
                            <!--
                            <button id="batch-make-conform" type="button" class="btn btn-default">
                                Make Conform
                            </button>
                            -->
                            <button id="export" type="button" class="btn btn-default">        
                                Export
                            </button>
                            <button id="rerun-report" type="button" class="btn btn-default">        
                                Re-Run
                            </button>
                            <button id="run-conformance-report" type="button" class="btn btn-primary">        
                                Run Report
                            </button>
                            <img id="conformance-report-spinner" src="{{ url_for('static', filename='spinner.gif') }}">
                        </div>
                    </div>

                    <div id="report-result-panel">
                        <h4 style="color:LightGray;">Results:</h4><hr style="margin-top:10px;margin-bottom:10px;">

                        <div class="row">
                            <a id="display-software-profile-packages" class="btn btn-sm btn-default pull-right" data-toggle="collapse" title="Click to view the contents" href="#software-profile-packages">View Software Profile Used <b class="caret"></b></a>
                            <div class="collapse" id="software-profile-packages">
                                <div id="software-profile-package-info">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <span id="conformance-report-info"></span>
                        </div>

                        <div class="row">
                            <table class="display table" id="conformance-report-table">
                                <thead>
                                    <tr>
                                        <th>Hostname</th>
                                        <th>Platform</th>
                                        <th>Software</th>
                                        <th id="header-host-packages">Host Packages</th>
                                        <th>Missing Packages</th>
                                        <th>Is Conformed</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    
                </div>
                <div id="software-profiles" class="tab-pane fade in active">
                    <table class="display table" id="software-profile-table">
                        <thead>
                            <tr>
                                <th>Profile Name</th>
                                <th>Software Packages</th>
                                <th>Created By</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}