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


{% block head %}
    <link rel="stylesheet" type="text/css" href="/static/jquery/css/inventory.css">
    <script type="text/javascript" src="/static/jquery/js/common-utils.js"></script>

    <script>

    $(function () {

        var chassis_summary_table = $("#chassis-summary-table").DataTable({
            "order": [
                [0, "asc"]
            ],
            "bLengthChange": false,
            "pageLength": 10,
            "columnDefs": [{
                "targets": 0,
                "data": 'chassis',
                "render": function(data, type, row) {
                    return '<a class="show-chassis-details" chassis="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'count'
            }],
            "ajax": {
                "url": "/inventory/api/get_chassis_summary/" + prepare_region_from_cookie_for_rest_api()
            },
            "dom": '<f<t>p>'
        }).on('draw.dt', function(e, settings, json) {
            if (chassis_summary_table.column( 1 ).data().length > 0) {
                $('#chassis_count').html(chassis_summary_table.column( 1 ).data().reduce( function (a,b) {
                    return a + b;
                }));
            } else {
                $('#chassis_count').html("0");
            }

            $('#chassis_types_count').html(chassis_summary_table.page.info().recordsTotal);
        });

        var model_name_summary_table = $("#model-name-summary-table").DataTable({
            "order": [
                [0, "asc"]
            ],
            "pageLength": 10,
            "columnDefs": [{
                "targets": 0,
                "data": 'model_name',
                "render": function(data, type, row) {
                    if (data == '') {
                        return '(Undefined PID)';
                    } else {
                     return data;
                    }
                }
            }, {
                "targets": 1,
                "data": 'in_use_count',
                "render": function(data, type, row) {
                    if (data == '0'){
                        return data
                    }
                    return '<a class="show-in-use-model-name-details" model_name="' + row['model_name'] + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 2,
                "data": 'available_count',
                "render": function(data, type, row) {
                    if (data == '0'){
                        return data
                    }
                    return '<a class="show-available-model-name-details" model_name="' + row['model_name'] + '" href="javascript://">' + data + '</a>';
                }
            }],
            "ajax": {
                "url": "/inventory/api/get_model_name_summary/" + prepare_region_from_cookie_for_rest_api()
            },
            "dom": '<lf<t>p>'
        }).on('draw.dt', function(e, settings, json) {
            $('#model_name_count').html(model_name_summary_table.page.info().recordsTotal);
        });

        var host_no_serial_number_table = $("#host-no-serial-number-table").DataTable({
            "serverSide": true,
            "order": [
                [0, "asc"]
            ],
            "columns": [
                { "data": "hostname" },
                { "data": "count", orderable: false }
            ],
            "bLengthChange": false,
            "pageLength": 5,
            "columnDefs": [{
                "targets": 0,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a class="show-host-no-serial-number-details" hostname="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'count'
            }],
            "ajax": {
                "url": "/datatable/api/get_inventory_without_serial_number/" + prepare_region_from_cookie_for_rest_api()
            },
            "dom": '<<t>p>'
        }).on('draw.dt', function(e, settings, json) {
            $('#host_no_serial_number_count').html(host_no_serial_number_table.page.info().recordsTotal);
        });

        var host_duplicate_serial_number_table = $("#host-duplicate-serial-number-table").DataTable({
            "serverSide": true,
            "order": [
                [0, "asc"]
            ],
            "columns": [
                { "data": "serial_number" },
                { "data": "count", orderable: false }
            ],
            "bLengthChange": false,
            "pageLength": 5,
            "columnDefs": [{
                "targets": 0,
                "data": 'serial_number',
                "render": function(data, type, row) {
                    return '<a class="show-serial-number-details" serial_number="' + data + '" href="javascript://">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'count'
            }],
            "ajax": {
                "url": "/datatable/api/get_inventory_with_duplicate_serial_number/" + prepare_region_from_cookie_for_rest_api()
            },
            "dom": '<<t>p>'
        }).on('draw.dt', function(e, settings, json) {
            $('#host_duplicate_serial_number_count').html(host_duplicate_serial_number_table.page.info().recordsTotal);
        });

        var hosts_with_failed_inventory_retrieval_table = $("#hosts-with-failed-inventory-retrieval-table").DataTable({
            "serverSide": true,
            "ajax": {
                "url": "/datatable/api/get_managed_hosts/region/" + prepare_region_from_cookie_for_rest_api() + "/filter_failed/" + 1,
                "data": function (d) {
                    define_column_names(d);
                }
            },
            "columns": [
                { "data": "hostname" },
                { "data": "region" },
                { "data": "location" },
                { "data": "host_or_ip" },
                { "data": "chassis" },
                { "data": "platform" },
                { "data": "software" },
                { "data": "last_successful_retrieval", "orderable": false }
            ],
            "order": [
                [0, "asc"]
            ],
            "pageLength": 10,
            "columnDefs": [{
                "targets": 0,
                "data": 'hostname',
                "render": function(data, type, row) {
                    return '<a target="_blank" href="/host_dashboard/hosts/' + data + '/">' + data + '</a>';
                }
            }, {
                "targets": 1,
                "data": 'region'
            }, {
                "targets": 2,
                "data": 'location'
            }, {
                "targets": 3,
                "data": 'host_or_ip'
            }, {
                "targets": 4,
                "data": 'chassis'
            }, {
                "targets": 5,
                "data": 'platform'
            }, {
                "targets": 6,
                "data": 'software'
            }, {
                "targets": 7,
                "data": 'last_successful_retrieval',
                "render": function(data, type, row) {
                    if (row['inventory_retrieval_status'] == 'failed') {
                        return '<span style="color:red;">' + data + '</span>';
                    } else {
                        return data;
                    }
                }
            }]
        }).on('draw.dt', function(e, settings, json) {
            $('#host_failed_inventory_retrieval').html(hosts_with_failed_inventory_retrieval_table.page.info().recordsTotal);
        });

        // Use delegate pattern for event
        $("#chassis-summary-table").on("click", ".show-chassis-details", function() {
            display_chassis_details_dialog($(this).attr('chassis'));
        });
        $("#model-name-summary-table").on("click", ".show-in-use-model-name-details", function() {
            display_in_use_model_name_details_dialog($(this).attr('model_name'));
        });
        $("#model-name-summary-table").on("click", ".show-available-model-name-details", function() {
            display_available_model_name_details_dialog($(this).attr('model_name'));
        });
        $("#host-no-serial-number-table").on("click", ".show-host-no-serial-number-details", function() {
            display_host_no_serial_number_details_dialog($(this).attr('hostname'));
        });
        $("#host-duplicate-serial-number-table").on("click", ".show-serial-number-details", function() {
            display_serial_number_details_dialog($(this).attr('serial_number'));
        });

        function display_chassis_details_dialog(chassis) {
            $('#display-chassis-details-dialog').modal({
                show: true
            });
            display_chassis_details(chassis)
        }

        function display_in_use_model_name_details_dialog(model_name) {
            $('#display-in-use-model-name-details-dialog').modal({
                show: true
            });
            display_in_use_model_name_details(model_name)
        }

        function display_available_model_name_details_dialog(model_name) {
            $('#display-available-model-name-details-dialog').modal({
                show: true
            });
            display_available_model_name_details(model_name)
        }

        function display_serial_number_details_dialog(serial_number) {
            $('#display-serial-number-details-dialog').modal({
                show: true
            });
            display_serial_number_details(serial_number)
        }

        function display_host_no_serial_number_details_dialog(hostname) {
            $('#display-host-no-serial-number-details-dialog').modal({
                show: true
            });
            display_host_no_serial_number_details(hostname)
        }

        function display_host_no_serial_number_details(hostname) {
            $('#host-no-serial-number-title').html('Inventory without Serial Number in Host: ' + '<a target="_blank" href="/host_dashboard/hosts/' + hostname + '/">' + hostname + '</a>');

            $("#host-no-serial-number-details-table").DataTable({
                destroy: true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ url_for('datatable.api_search_inventory') }}",
                    "data": function (d) {
                        d.available = false;
                        var region_id = prepare_region_from_cookie_for_rest_api();
                        if (region_id != 0) {
                            d.region_ids = region_id.toString();
                        }
                        d.serial_number = "";
                        d.hostname = hostname;
                        define_column_names(d);
                    }
                },
                "columns": [
                    { "data": "model_name" },
                    { "data": "name" },
                    { "data": "description" },
                    { "data": "chassis" },
                    { "data": "platform" },
                    { "data": "software" },
                    { "data": "region" },
                    { "data": "location" },
                    { "data": "last_successful_retrieval", "orderable": false }
                ],
                "order": [
                    [1, "asc"]
                ],
                "pageLength": 10,
                "columnDefs": [{
                    "targets": 0,
                    "data": 'model_name'
                }, {
                    "targets": 1,
                    "data": 'name'
                }, {
                    "targets": 2,
                    "data": 'description'
                },  {
                    "targets": 3,
                    "data": 'chassis'
                }, {
                    "targets": 4,
                    "data": 'platform'
                }, {
                    "targets": 5,
                    "data": 'software'
                }, {
                    "targets": 6,
                    "data": 'region'
                }, {
                    "targets": 7,
                    "data": 'location'
                }, {
                    "targets": 8,
                    "data": 'last_successful_retrieval',
                    "render": function(data, type, row) {
                        if (row['inventory_retrieval_status'] == 'failed') {
                            return '<span style="color:red;">' + data + '</span>';
                        } else {
                            return data;
                        }
                    }
                }]
            });

        }

        function display_serial_number_details(serial_number) {
            $('#serial-number-title').text('Inventory with Duplicate Serial Number: ' + serial_number);

            $("#serial-number-details-table").DataTable({
                destroy: true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ url_for('datatable.api_search_inventory') }}",
                    "data": function (d) {
                        d.available = false;
                        var region_id = prepare_region_from_cookie_for_rest_api();
                        if (region_id != 0) {
                            d.region_ids = region_id.toString();
                        }
                        d.serial_number = serial_number;
                        define_column_names(d);
                    }
                },
                "columns": [
                    { "data": "model_name" },
                    { "data": "name" },
                    { "data": "description" },
                    { "data": "hostname" },
                    { "data": "host_or_ip", "orderable": false },
                    { "data": "chassis" },
                    { "data": "platform" },
                    { "data": "software" },
                    { "data": "region" },
                    { "data": "location" },
                    { "data": "last_successful_retrieval", "orderable": false }
                ],
                "order": [
                    [3, "asc"]
                ],
                "pageLength": 10,
                "columnDefs": [{
                    "targets": 0,
                    "data": 'model_name'
                }, {
                    "targets": 1,
                    "data": 'name'
                }, {
                    "targets": 2,
                    "data": 'description'
                }, {
                    "targets": 3,
                    "data": 'hostname',
                    "render": function(data, type, row) {
                        return '<a target="_blank" href="/host_dashboard/hosts/' + row['hostname'] + '/">' + row['hostname'] + '</a>';
                    }
                }, {
                    "targets": 4,
                    "data": 'host_or_ip'
                }, {
                    "targets": 5,
                    "data": 'chassis'
                }, {
                    "targets": 6,
                    "data": 'platform'
                }, {
                    "targets": 7,
                    "data": 'software'
                }, {
                    "targets": 8,
                    "data": 'region'
                }, {
                    "targets": 9,
                    "data": 'location'
                }, {
                    "targets": 10,
                    "data": 'last_successful_retrieval',
                    "render": function(data, type, row) {
                        if (row['inventory_retrieval_status'] == 'failed') {
                            return '<span style="color:red;">' + data + '</span>';
                        } else {
                            return data;
                        }
                    }
                }]
            });

        }


        function display_in_use_model_name_details(model_name) {
            if (model_name == "") {
                $('#in-use-model-name-details-title').text('Model Name: (Undefined PID)');
            } else {
                $('#in-use-model-name-details-title').text('Model Name: ' + model_name);
            }

            $("#in-use-model-name-details-table").DataTable({
                destroy: true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ url_for('datatable.api_search_inventory') }}",
                    "data": function (d) {
                        d.available = false;
                        var region_id = prepare_region_from_cookie_for_rest_api();
                        if (region_id != 0) {
                            d.region_ids = region_id.toString();
                        }
                        d.model_names = model_name;
                        define_column_names(d);
                    }
                },
                "columns": [
                    { "data": "name" },
                    { "data": "serial_number" },
                    { "data": "description" },
                    { "data": "hostname" },
                    { "data": "host_or_ip", "orderable": false},
                    { "data": "chassis" },
                    { "data": "platform" },
                    { "data": "software" },
                    { "data": "region" },
                    { "data": "location" },
                    { "data": "last_successful_retrieval", "orderable": false }
                ],
                "order": [
                    [3, "asc"]
                ],
                "pageLength": 10,
                "columnDefs": [{
                    "targets": 0,
                    "data": 'name'
                }, {
                    "targets": 1,
                    "data": 'serial_number'
                }, {
                    "targets": 2,
                    "data": 'description'
                }, {
                    "targets": 3,
                    "data": 'hostname',
                    "render": function(data, type, row) {
                        return '<a target="_blank" href="/host_dashboard/hosts/' + row['hostname'] + '/">' + row['hostname'] + '</a>';
                    }
                },  {
                    "targets": 4,
                    "data": 'host_or_ip'
                }, {
                    "targets": 5,
                    "data": 'chassis'
                },{
                    "targets": 6,
                    "data": 'platform'
                }, {
                    "targets": 7,
                    "data": 'software'
                }, {
                    "targets": 8,
                    "data": 'region'
                }, {
                    "targets": 9,
                    "data": 'location'
                }, {
                    "targets": 10,
                    "data": 'last_successful_retrieval',
                    "render": function(data, type, row) {
                        if (row['inventory_retrieval_status'] == 'failed') {
                            return '<span style="color:red;">' + data + '</span>';
                        } else {
                            return data;
                        }
                    }
                }]
            });

        }

        function display_available_model_name_details(model_name) {
            if (model_name == "") {
                $('#available-model-name-details-title').text('Model Name: (Undefined PID)');
            } else {
                $('#available-model-name-details-title').text('Model Name: ' + model_name);
            }

            $("#available-model-name-details-table").DataTable({
                destroy: true,
                "serverSide": true,
                "ajax": {
                    "url": "{{ url_for('datatable.api_search_inventory') }}",
                    "data": function (d) {
                        d.available = true;
                        var region_id = prepare_region_from_cookie_for_rest_api();
                        if (region_id != 0) {
                            d.region_ids = region_id.toString();
                        }
                        d.model_names = model_name;
                        define_column_names(d);
                    }
                },
                "columns": [
                    { "data": "serial_number" },
                    { "data": "vid" },
                    { "data": "description" },
                    { "data": "notes"}
                ],
                "order": [
                    [0, "asc"]
                ],
                "pageLength": 10,
                "columnDefs": [{
                    "targets": 0,
                    "data": 'serial_number'
                }, {
                    "targets": 1,
                    "data": 'vid'
                }, {
                    "targets": 2,
                    "data": 'description'
                }, {
                    "targets": 3,
                    "data": 'notes'
                }]
            });

        }

        function display_chassis_details(chassis) {
            $('#chassis-title').text('Hosts with Chassis Type: ' + chassis);

            $("#chassis-details-table").DataTable({
                destroy: true,
                "serverSide": true,
                "ajax": {
                    "url": "/datatable/api/get_managed_hosts/region/" + prepare_region_from_cookie_for_rest_api() + "/chassis/" + chassis,
                    "data": function (d) {
                        define_column_names(d);
                    }
                },
                "columns": [
                    { "data": "hostname" },
                    { "data": "region" },
                    { "data": "location" },
                    { "data": "host_or_ip"},
                    { "data": "platform" },
                    { "data": "software" },
                    { "data": "last_successful_retrieval", "orderable": false }
                ],
                "order": [
                    [0, "asc"]
                ],
                "pageLength": 10,
                "columnDefs": [{
                    "targets": 0,
                    "data": 'hostname',
                    "render": function(data, type, row) {
                        return '<a target="_blank" href="/host_dashboard/hosts/' + data + '/">' + data + '</a>';
                    }
                }, {
                    "targets": 1,
                    "data": 'region'
                }, {
                    "targets": 2,
                    "data": 'location'
                }, {
                    "targets": 3,
                    "data": 'host_or_ip'
                }, {
                    "targets": 4,
                    "data": 'platform'
                }, {
                    "targets": 5,
                    "data": 'software'
                }, {
                    "targets": 6,
                    "data": 'last_successful_retrieval',
                    "render": function(data, type, row) {
                        if (row['inventory_retrieval_status'] == 'failed') {
                            return '<span style="color:red;">' + data + '</span>';
                        } else {
                            return data;
                        }
                    }
                }]
            });

        }

        function define_column_names(d) {
            var column_names = [];
            for(index = 0; index < d.columns.length; index++) {
                column_names.push(d.columns[index].data)
            }
            d.column_names = column_names.join(',');
        }

        $('#filter-region-selector').select2({
            placeholder: 'Filter by Region',
            ajax: {
                url: "/inventory/api/get_regions/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        show_all: true,
                        page: params.page
                    };
                }
            }
        });


        $('#filter-region-selector').on('change', function(e) {
            if ($(this).val() == null) {
                write_region_to_cookie("1", "ALL");
            } else {
                write_region_to_cookie($(this).val(), $('#filter-region-selector :selected').text());
            }

            chassis_summary_table.ajax.url("/inventory/api/get_chassis_summary/" + prepare_region_from_cookie_for_rest_api()).load();
            model_name_summary_table.ajax.url("/inventory/api/get_model_name_summary/" + prepare_region_from_cookie_for_rest_api()).load();
            host_no_serial_number_table.ajax.url("/datatable/api/get_inventory_without_serial_number/" + prepare_region_from_cookie_for_rest_api()).load();
            host_duplicate_serial_number_table.ajax.url("/datatable/api/get_inventory_with_duplicate_serial_number/" + prepare_region_from_cookie_for_rest_api()).load();
            hosts_with_failed_inventory_retrieval_table.ajax.url("/datatable/api/get_managed_hosts/region/" + prepare_region_from_cookie_for_rest_api() + "/filter_failed/" + 1).load();

        });
        // initialize selector.
        var regions_vals = get_region_from_cookie();
        $("#filter-region-selector").data('select2').trigger('select', {data: {"id": regions_vals[0], "text": regions_vals[1]}});


        function prepare_region_from_cookie_for_rest_api() {
            var region_vals = get_region_from_cookie();
            return region_vals[0] - 1;
        }

        function get_region_from_cookie() {
            var region_id = $.cookie('region-id');
            var region_name = $.cookie('region-name');

            if (region_id != null) {
                return [parseInt(region_id), region_name]
            } else {
                return [1, "ALL"]
            }
        }

        function write_region_to_cookie(region_id, region_name) {
            write_cookie_value('region-id', region_id);
            write_cookie_value('region-name', region_name);
        }

        setInterval(function() {
            // user paging is not reset on reload - https://datatables.net/reference/api/ajax.reload()
            chassis_summary_table.ajax.url("/inventory/api/get_chassis_summary/" + prepare_region_from_cookie_for_rest_api()).load(null, false);
            model_name_summary_table.ajax.url("/inventory/api/get_model_name_summary/" + prepare_region_from_cookie_for_rest_api()).load(null, false);
            host_no_serial_number_table.ajax.url("/datatable/api/get_inventory_without_serial_number/" + prepare_region_from_cookie_for_rest_api()).load(null, false);
            host_duplicate_serial_number_table.ajax.url("/datatable/api/get_inventory_with_duplicate_serial_number/" + prepare_region_from_cookie_for_rest_api()).load(null, false);
            hosts_with_failed_inventory_retrieval_table.ajax.url("/datatable/api/get_managed_hosts/region/" + prepare_region_from_cookie_for_rest_api() + "/filter_failed/" + 1).load(null, false);

        }, 10000);

         $('#export').click(function() {
            $('#export-inventory-dashboard-dialog').modal('show');
        });

        $('#on-export-inventory-submit').click(function() {
            if ($('#send_email').prop('checked')) {
                if ($('#user_email').val().trim() == "") {
                    bootbox.alert("Email Address has not been specified.");
                    return false;
                } else {
                    $.ajax({
                        url: "/inventory/api/check_if_email_notify_enabled/",
                        dataType: 'json',
                        success: function(result) {
                            if (result.email_notify_enabled) {
                                submit_export_form();
                            } else {
                                bootbox.alert("<img src='/static/error.png'>&nbsp;Please enable Email Notification at <a target='_blank' href='{{ url_for('admin_console.home') }}'>Tools > Admin Console > Notifications</a> in Software page.");
                                return false;
                            }
                        }
                    });
                }

            } else {
                submit_export_form();
            }

        });


        function submit_export_form() {
            $('#hidden_region_id').val(prepare_region_from_cookie_for_rest_api().toString());

            $('#export-inventory-dashboard-form').attr('action', "{{ url_for('inventory.export_inventory_dashboard') }}");
            $('#export-inventory-dashboard-dialog').modal('hide');
            $('#export-inventory-dashboard-form').submit();

        }
        $('[data-toggle="popover_email"]').popover({
            trigger : 'click',
            placement : 'top',
            html : true,
            content : function() {
                return $('#popover_email').html()
            }
        });
    })

    </script>

{% endblock %}

{% block main %}
<div id="popover_email" style="display: none">
  <pre>By default, the email address in the user account
is used. To define it, go to <a href="{{ url_for('authenticate.current_user_edit') }}">Tools > Edit User</a>
in Software page. Or, you may enter one or more
comma-delimited email address(es) here.</pre>
</div>

<div id="export-inventory-dashboard-dialog" class="modal" role="dialog">
    <div class="modal-dialog">
        <form method="post" id="export-inventory-dashboard-form" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h4>
                        <center>Export Inventory Dashboard Summary</center>
                    </h4>
                </div>
                <div class="modal-body">
                    {{ edit_field(export_dashboard_form.export_format, field_width="col-sm-6", class="form-control") }}
                    {% set info ='<a href="javascript://"><span class="glyphicon glyphicon-info-sign" style="color:dodgerblue"
                           aria-hidden="true" data-toggle="popover_email"></span></a>' %}
                    <div class="form-group">
                        <label class="col-sm-4 control-label" style="padding-top: 10px;padding-left: 0px;" id="label_{{ export_dashboard_form.send_email.id }}">{{ export_dashboard_form.send_email.label.text }}</label>
                        {{ info | safe }}
                        <div class="col-sm-6" style="width:50px;">
                            {{ export_dashboard_form.send_email(type='checkbox', class="form-control", style="-webkit-box-shadow:none") }}
                        </div>
                        <div class="col-sm-6" style="padding-top: 5px;padding-left: 0px;">
                            {{ export_dashboard_form.user_email(class="form-control", placeholder="Comma-delimited Email Address(es)") }}
                        </div>

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <button id="on-export-inventory-submit" type="button" class="btn btn-primary">OK</button>
                            <button class="btn" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
                <input id="hidden_region_id" name="{{ export_dashboard_form.hidden_region_id.name }}" value="{{ export_dashboard_form.hidden_region_id.data }}" type="hidden">
            </div>
        </form>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-sm-3">
        <span class="DodgerBlue"><strong><i class="glyphicon glyphicon-cog"></i> Inventory Dashboard </strong></span>
        </div>
        <div class="col-sm-3" style="margin-left: 8%">
            <div class="input-group">
                <span title="Filter Hosts" class="input-group-addon glyphicon glyphicon-filter"></span>
                <select class="form-control" id="filter-region-selector">
                </select>
            </div>
        </div>
        <button type="button" id="export" class="btn btn-primary pull-right">
            Export
        </button>
    </div>

    <div class="row"><hr></div>

    <div class="row">
        <div class="col-sm-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    Total Hosts:
                    <span id="chassis_count"></span>
                    <p style="margin:0 0">Total Chassis Types:
                    <span id="chassis_types_count"></span>
                </div>
                <div class="panel-body">
                    <table class="display table" id="chassis-summary-table">
                        <thead>
                            <tr>
                                <th>Chassis</th>
                                <th>Count</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="panel panel-info">
                <div class="panel-heading">
                    Total PID Types:
                    <span id="model_name_count"></span>
                    <p style="margin:0 0">Column 'Available' refers to All Regions
                </div>
                <div class="panel-body">
                    <table class="display table" id="model-name-summary-table">
                        <thead>
                            <tr>
                                <th>Model Name (PID)</th>
                                <th>In Use</th>
                                <th>Available</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    Inventory without Serial Number
                    <p style="margin:0 0">Total Hosts:
                        <span id="host_no_serial_number_count"></span>
                </div>
                <div class="panel-body">
                    <table class="display table" id="host-no-serial-number-table">
                        <thead>
                            <tr>
                                <th>Hostname</th>
                                <th>Count</th>
                            </tr>
                        </thead>
                    </table>
                </div>

            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    Inventory with Duplicate Serial Numbers
                    <p style="margin:0 0">Total Duplicate Serial Numbers:
                        <span id="host_duplicate_serial_number_count"></span>
                </div>
                <div class="panel-body">
                    <table class="display table" id="host-duplicate-serial-number-table">
                        <thead>
                            <tr>
                                <th>Serial Number</th>
                                <th>Count</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>
    <div class="row"><hr></div>
    <div class="panel panel-info">
        <div class="panel-heading">
            Hosts that Failed the Inventory Retrieval
            <p style="margin:0 0">Total Hosts:
                <span id="host_failed_inventory_retrieval"></span>
        </div>
        <div class="panel-body">
            <table cellspacing="0" class="display table" id="hosts-with-failed-inventory-retrieval-table">
                <thead>
                    <tr>
                        <th>Hostname</th>
                        <th>Region</th>
                        <th>Location</th>
                        <th>TS or IP</th>
                        <th>Chassis</th>
                        <th>Platform</th>
                        <th>Software</th>
                        <th>Last<br> Successful<br> Retrieval</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<div id="display-chassis-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog" style="width: 1000px;">
        <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>
                        <center><span id="chassis-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:570px; overflow-y: scroll;">
                        <table class="display table" id="chassis-details-table">
                            <thead>
                                <tr>
                                    <th>Hostname</th>
                                    <th>Region</th>
                                    <th>Location</th>
                                    <th>TS or IP</th>
                                    <th>Platform</th>
                                    <th>Software</th>
                                    <th>Last<br> Successful<br> Retrieval</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
<div id="display-in-use-model-name-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog" style="width: 1300px;">
        <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>
                        <center><span id="in-use-model-name-details-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:570px; overflow-y: scroll;">
                        <table class="display table" id="in-use-model-name-details-table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Serial Number</th>
                                    <th>Description</th>
                                    <th>Hostname</th>
                                    <th>TS or IP</th>
                                    <th>Chassis</th>
                                    <th>Platform</th>
                                    <th>Software</th>
                                    <th>Region</th>
                                    <th>Location</th>
                                    <th>Last Successful Retrieval</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
<div id="display-available-model-name-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog" style="width: 1000px;">
        <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>
                        <center><span id="available-model-name-details-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:570px; overflow-y: scroll;">
                        <table class="display table" id="available-model-name-details-table">
                            <thead>
                                <tr>
                                    <th>Serial Number</th>
                                    <th>VID</th>
                                    <th>Description</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
<div id="display-host-no-serial-number-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog" style="width: 1300px;">
        <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>
                        <center><span id="host-no-serial-number-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:570px; overflow-y: scroll;">
                        <table class="display table" id="host-no-serial-number-details-table">
                            <thead>
                                <tr>
                                    <th>Model Name</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Chassis</th>
                                    <th>Platform</th>
                                    <th>Software</th>
                                    <th>Region</th>
                                    <th>Location</th>
                                    <th>Last Successful Retrieval</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
<div id="display-serial-number-details-dialog" class="modal" role="dialog">
    <div class="modal-dialog" style="width: 1300px;">
        <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>
                        <center><span id="serial-number-title"></span></center>
                    </h4>
                </div>
                <div class="modal-body">
                    <div style="height:570px; overflow-y: scroll;">
                        <table class="display table" id="serial-number-details-table">
                            <thead>
                                <tr>
                                    <th>Model Name</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Hostname</th>
                                    <th>TS or IP</th>
                                    <th>Chassis</th>
                                    <th>Platform</th>
                                    <th>Software</th>
                                    <th>Region</th>
                                    <th>Location</th>
                                    <th>Last Successful Retrieval</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>
{% endblock %}