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

{% block head %}
<script>
    $(function() {

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

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

        $("#installation-history-datatable").on("show.bs.collapse", ".collapse", function(e) {
            $("#" + slider_open_id).removeClass("in");
            slider_open_id = e.currentTarget.id;
        });

        $("#installation-history-datatable").on("hide.bs.collapse", ".collapse", function(e) {
            slider_open_id = '';
        });


        function get_log_icon(hostname, table, id, session_log, trace) {
            if (trace || session_log) {
                data = "<center>";

                var session_log_url = "/log/hosts/" + hostname + "/" + table + "/session_log/" + id + "?file_path=" + session_log;

                if (session_log) {
                    data += "<a href='" + session_log_url + "' target='_session_log'>";
                    data += "<img src='/static/file.png' title='Session Log'></a>";
                }

                if (trace) {
                    data += "<a href='/log/hosts/" + hostname + "/" + table + "/trace/" + trace + "/' target='_trace'>";
                    data += "<img src='/static/error.png' title='debug trace'></a>";
                }

                data += "</center>";
                return "<span style='white-space:nowrap;'>" + data + "</span>";

            } else {
                return '&nbsp;';
            }
        }

        var active_committed_table = $("#active-committed").dataTable({
            "scrollY": "250px",
            "bSort": false,
            "iDisplayLength": 400,
            "sDom": 'ft',
            "columnDefs": [{
                "targets": 0,
                "data": 'package'
            }],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_packages', hostname=host.hostname, package_state='active-committed') }}",
            }
        }).on('draw.dt', function(e, settings, json) {
            if (active_committed_table.api().ajax.json().data.length > 0) {
                $("#panel-active-committed").show();
            } else {
                $("#panel-active-committed").hide();
            }
        });

        var active_table = $("#active").dataTable({
            "scrollY": "250px",
            "bSort": false,
            "iDisplayLength": 400,
            "sDom": 'ft',
            "columnDefs": [{
                "targets": 0,
                "data": 'package'
            }],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_packages', hostname=host.hostname, package_state='active') }}",
            }
        }).on('draw.dt', function(e, settings, json) {
            if (active_table.api().ajax.json().data.length > 0) {
                $("#panel-active").show();
            } else {
                $("#panel-active").hide();
            }
        });

        var inactive_table = $("#inactive").dataTable({
            "scrollY": "250px",
            "bSort": false,
            "iDisplayLength": 400,
            "sDom": 'ft',
            "columnDefs": [{
                "targets": 0,
                "data": 'package'
            }],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_packages', hostname=host.hostname, package_state='inactive') }}",
            }
        }).on('draw.dt', function(e, settings, json) {
            if (inactive_table.api().ajax.json().data.length > 0) {
                $("#panel-inactive").show();
            } else {
                $("#panel-inactive").hide();
            }
        });

        var inactive_committed_table = $("#inactive-committed").dataTable({
            "scrollY": "250px",
            "bSort": false,
            "iDisplayLength": 400,
            "sDom": 'ft',
            "columnDefs": [{
                "targets": 0,
                "data": 'package'
            }],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_packages', hostname=host.hostname, package_state='inactive-committed') }}",
            }
        }).on('draw.dt', function(e, settings, json) {
            if (inactive_committed_table.api().ajax.json().data.length > 0) {
                $("#panel-inactive-committed").show();
            } else {
                $("#panel-inactive-committed").hide();
            }
        });

        var scheduled_install_table = $("#scheduled-install-datatable").dataTable({
            "order": [
                [1, "asc"]
            ],
            "bLengthChange": false,
            "paging": false,
            "info": false,
            "filter": false,
            "columnDefs": [{
                "targets": 0,
                "data": 'install_action',
                "render": function(data, type, row) {
                    var status = row['status'];
                    var session_log = row['session_log'];
                    var job_status_icon_html = '';

                    var session_log_url = "/log/hosts/" + row['hostname'] + "/install_job/session_log/" + row['install_job_id'] + "?file_path=" + session_log;

                    if (status == 'failed') {
                        job_status_icon_html += '<img src=\"{{ url_for('static', filename='error.png') }}\" title="Install Error - Click to View Session Log">';
                    } else if (status == 'in-progress') {
                        job_status_icon_html += '<img src=\"{{ url_for('static', filename='spinner.gif') }}\" title="In Progress - Click to View Session Log">';
                    }

                    if (session_log) {
                        job_status_icon_html = "<a href='" + session_log_url + "' target='_session_log'>" + job_status_icon_html + "</a>";
                    }

                    var icon_html = job_status_icon_html;

                    if (data == 'Migration-Audit' || data == 'Pre-Migrate' || data == 'Migrate' || data == 'Post-Migrate') {
                        return '<a href="/asr9k_x64_migrate/hosts/' + row['hostname'] + '/schedule_install/' + row['install_job_id'] + '/edit/">' + data + '</a>&nbsp;' + icon_html;
                    } else {
                        return '<a href="/install/hosts/' + row['hostname'] + '/schedule_install/' + row['install_job_id'] + '/edit/">' + data + '</a>&nbsp;' + icon_html;
                    }
                }
            }, {
                "targets": 1,
                "data": 'scheduled_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 2,
                "data": 'install_job_id',
                "render": function(data, type, row) {
                    return '<a class="install-delete" href="javascript://"  \
                install-action="' + row['install_action'] + '" \
                install-delete-url="/install_dashboard/api/hosts/install/delete/' + data + '/">Delete</a>';
                }
            }],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_scheduled_install', hostname=host.hostname) }}",
            }
        });

        var install_job_history_table = $("#installation-history-datatable").dataTable({
            "serverSide": true,
            "order": [
                [5, "desc"]
            ],
            "columns": [
                { "data": "install_action" },
                { "data": "scheduled_time" },
                { "data": "start_time" },
                { "data": "packages" },
                { "data": "status" },
                { "data": "status_time" },
                { "data": "session_log", "orderable": false },
                { "data": "created_by" }
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'install_action'
            }, {
                "targets": 1,
                "data": 'scheduled_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 2,
                "data": 'start_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 3,
                "data": 'packages',
                "render": function(data, type, row) {
                    return insert_slider(data, row['install_job_id']);
                }
            }, {
                "targets": 4,
                "data": 'status',
                "render": function(data, type, row) {
                    if (row['status'] == 'failed') {
                        return "&nbsp;<img src='/static/failed.png' title='Failed'>";
                    } else {
                        return "&nbsp;<img src='/static/green_check.png' title='Successful'>";
                    }
                }
            }, {
                "targets": 5,
                "data": 'status_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 6,
                "data": 'session_log',
                "render": function(data, type, row) {
                    return get_log_icon(row['hostname'], 'install_job_history', row['install_job_id'], row['session_log'], row['trace']);
                }
            }, {
                "targets": 7,
                "data": 'created_by'
            }, ],
            "ajax": {
                "url": "{{ url_for('datatable.api_get_host_dashboard_install_job_history', hostname=host.hostname) }}",
            }
        });

        var inventory_table = $("#inventory-datatable").dataTable({
            "serverSide": true,
            "order": [
                [0, "asc"]
            ],
            "columns": [
                { "data": "location" },
                { "data": "model_name" },
                { "data": "name" },
                { "data": "description" },
                { "data": "serial_number" },
                { "data": "vid" }
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'location'
            }, {
                "targets": 1,
                "data": 'model_name'
            }, {
                "targets": 2,
                "data": 'name'
            }, {
                "targets": 3,
                "data": 'description'
            }, {
                "targets": 4,
                "data": 'serial_number'
            }, {
                "targets": 5,
                "data": 'vid'
            }, ],
            "ajax": {
                "url": "{{ url_for('datatable.api_get_inventory', hostname=host.hostname) }}",
            }
        });

        var inventory_job_history_table = $("#retrieval-history-datatable").dataTable({
            "order": [
                [1, "desc"]
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'status',
                "render": function(data, type, row) {
                    if (row['status'] == 'failed') {
                        return "&nbsp;<img src='/static/failed.png' title='Failed'>";
                    } else {
                        return "&nbsp;<img src='/static/green_check.png' title='Successful'>";
                    }
                }
            }, {
                "targets": 1,
                "data": 'status_time',
                "render": function(data, type, row) {
                    return getDateStringfromUTCString(data, use_utc_timezone);
                }
            }, {
                "targets": 2,
                "data": 'elapsed_time'
            }, {
                "targets": 3,
                "render": function(data, type, row) {
                    return get_log_icon(row['hostname'], 'inventory_job_history', row['inventory_job_id'], row['session_log'], row['trace']);
                }
            }, ],
            "ajax": {
                "url": "{{ url_for('host_dashboard.api_get_host_dashboard_software_inventory_history', hostname=host.hostname) }}",
            }
        });


        var satellite_table = $("#satellite-datatable").dataTable({
            "serverSide": true,
            "order": [
                [0, "asc"]
            ],
            "columns": [
                { "data": "satellite_id" },
                { "data": "type" },
                { "data": "state" },
                { "data": "install_state" },
                { "data": "ip_address" },
                { "data": "mac_address" },
                { "data": "serial_number" },
                { "data": "remote_version" },
                { "data": "fabric_links" }
            ],
            "columnDefs": [{
                "targets": 0,
                "data": 'satellite_id'
            }, {
                "targets": 1,
                "data": 'type'
            }, {
                "targets": 2,
                "data": 'state'
            }, {
                "targets": 3,
                "data": 'install_state'
            }, {
                "targets": 4,
                "data": 'ip_address'
            }, {
                "targets": 5,
                "data": 'mac_address'
            }, {
                "targets": 6,
                "data": 'serial_number'
            }, {
                "targets": 7,
                "data": 'remote_version',
                "render": function(data, type, row) {
                    return comma2br(data) + '<br>' + '<span style="color: Gray;">' + comma2br(row['remote_version_details']) + '</span>';
                }
            }, {
                "targets": 8,
                "data": 'fabric_links',
                "render": function(data, type, row) {
                    return comma2br(data);
                }
            }, ],
            "ajax": {
                "url": "{{ url_for('datatable.api_get_satellites', hostname=host.hostname) }}",
            }
        });

        $(".install-delete-all").on("click", function() {
            var delete_url = $(this).attr('install-delete-url');
            var status = $(this).attr('status');

            var message = "";
            if (status == 'failed') {
                message = "Delete All failed installations?<br>(Notice: Any scheduled installations dependent on the failed installations will also be deleted.)"
            } else {
                message = "Delete All scheduled installations?";
            }

            bootbox.confirm(message, function(result) {
                if (result) {
                    $.ajax({
                        url: delete_url,
                        type: 'DELETE',
                        success: function(xhr) {
                            handle_ajax_success(window, xhr);
                        }
                    });
                }
            });
        });

        // Use delegate pattern for event
        $("#scheduled-install-datatable").on("click", ".install-delete", function() {
            var delete_url = $(this).attr('install-delete-url');
            var install_action = $(this).attr('install-action');

            bootbox.confirm("Delete this scheduled installation, '<b>" + install_action + "</b>'?<br>" +
                "(Notice: Any scheduled installations dependent on this item will also be deleted.)",
                function(result) {
                    if (result) {
                        $.ajax({
                            url: delete_url,
                            type: 'DELETE',
                            success: function(xhr) {
                                handle_ajax_success(window, xhr);
                            },
                            error: function(xhr, status, error) {
                                handle_ajax_error(window, xhr, error);
                            }
                        });
                    }
                });
        });

        function handle_ajax_error(window, xhr, error) {
            var obj = $.parseJSON(xhr.responseText);
            if (typeof obj.error != "undefined") {
                bootbox.alert("<img src=\"{{ url_for('static', filename='error.png') }}\"> Error=" + xhr.status + ": " + obj.error, function() {
                    refresh_scheduled_install_table();
                });
            } else {
                bootbox.alert("<img src=\"{{ url_for('static', filename='error.png') }}\"> Error=" + xhr.status + ": " + error, function() {
                    refresh_scheduled_install_table();
                });
            }
        }

        function handle_ajax_success(window, xhr, return_url) {
            if (xhr.status == 'OK') {
                refresh_scheduled_install_table();
            } else {
                if (xhr.status == null) {
                    // Not authorized
                    bootbox.alert('Unable to delete.');
                } else {
                    bootbox.alert("<img src=\"{{ url_for('static', filename='error.png') }}\">" + xhr.status, function() {
                        refresh_scheduled_install_table();
                    });
                }
            }
        }

        $("#retrieve-inventory").on("click", function() {
            var retrieve_software_url = $(this).attr('retrieve-inventory-url');
            var return_url = $(this).attr('return-url');

            bootbox.confirm("If the host is reachable and CSM Server is not busy retrieving inventory for other hosts, " +
                "the inventory information should be refreshed within 30 seconds." +
                "The Last Successful Retrieval timestamp will be updated accordingly.  OK to proceed?",
                function(result) {
                    if (result) {
                        $.ajax({
                            url: retrieve_software_url,
                            success: function(response) {
                                if (response.status == 'OK') {
                                    var last_successful_inventory_elapsed_time = $('#last_successful_inventory_elapsed_time').html();
                                    last_successful_inventory_elapsed_time =
                                        (last_successful_inventory_elapsed_time + ' (scheduled)');
                                    $('#last_successful_inventory_elapsed_time').html(last_successful_inventory_elapsed_time)
                                } else {
                                    bootbox.alert('<img src=\"{{ url_for('static', filename='error.png') }}\">A similar request may be in progress or you are not an authorized user.');
                                }
                            }
                        });
                    }
                });
        });

        <!-- hide the table header to preserve space -->
        $(".hide-header").hide();

        $('#installation-history-button').on("click", function() {
            $('a[href="#installation-history"]').tab('show');
            window.location.href = "#host-tabs";
        });

        $('#retreival-history-button').on("click", function() {
            $('a[href="#retrieval-history"]').tab('show');
            window.location.href = "#host-tabs";
        });

        $('.UTCDate').val(function(index, currentValue) {
            // Invalid date would be less than 15 characters
            if ($(this).text().length > 15) {
                $(this).html(getDateStringfromUTCString($(this).text()), use_utc_timezone);
            }
        });

        var last_successful_inventory_time = '';
        var new_last_successful_inventory_time = '';

        get_host_dashboard_cookie();

        function get_host_dashboard_cookie() {
            $.ajax({
                url: "{{ url_for('host_dashboard.api_get_host_dashboard_cookie', hostname=host.hostname) }}",
                dataType: 'json',
                success: function(data) {
                    $.each(data, function(index, element) {
                        var html = '';
                        html += create_html_table_row('Region', element[0].region);
                        html += create_html_table_row('Location', element[0].location);
                        html += create_html_table_row('Roles', element[0].roles);
                        html += create_html_table_row('Chassis', element[0].platform);
                        html += create_html_table_row('Platform', element[0].software_platform);
                        html += create_html_table_row('Software', element[0].software_version);
                        html += create_html_table_row('Host or IP', element[0].host_or_ip);
                        html += create_html_table_row('Username', element[0].username);
                        html += create_html_table_row('Connection', element[0].connection);
                        html += create_html_table_row('Port Number', element[0].port_number);
                        html += create_html_table_row('Jump Server', element[0].jump_host);
                        html += create_html_table_row('Created By', element[0].created_by);
                        html += create_html_table_row('Software Profile', element[0].software_profile_name);

                        $('#host-info-table').html(html);

                        elapsed_time = element[0].last_successful_inventory_elapsed_time;
                        if (element[0].status == 'scheduled') {
                            elapsed_time += ' (scheduled)';
                        } else if (element[0].status == 'in-progress') {
                            elapsed_time += '<img src=\"{{ url_for('static', filename='spinner.gif') }}\">';
                        } else if (element[0].status == 'failed') {
                            elapsed_time =
                                '<span style="color:red;">' + elapsed_time + '</span>';
                        }

                        $('#last_successful_inventory_elapsed_time').html(elapsed_time);

                        new_last_successful_inventory_time = element[0].last_successful_inventory_time;
                        if (new_last_successful_inventory_time != last_successful_inventory_time) {
                            refresh_packages_tables();
                            refresh_inventory_table();
                            last_successful_inventory_time = new_last_successful_inventory_time
                        }

                        display_alert(element[0].can_schedule, element[0].can_install);
                    });
                }
            });
        }

        function refresh_packages_tables() {
            active_committed_table.api().ajax.reload(null, false);
            active_table.api().ajax.reload(null, false);
            inactive_committed_table.api().ajax.reload(null, false);
            inactive_table.api().ajax.reload(null, false);
        }

        function refresh_scheduled_install_table() {
            scheduled_install_table.api().ajax.reload(null, false);
        }

        function refresh_inventory_table() {
            inventory_table.api().ajax.reload(null, false);
        }

        function refresh_install_job_history_table() {
            install_job_history_table.api().ajax.reload(null, false);
        }

        function refresh_inventory_job_history_table() {
            inventory_job_history_table.api().ajax.reload(null, false);
        }

        function refresh_satellite_table() {
            satellite_table.api().ajax.reload(null, false);
        }

        show_hide_satellite_tab();

        function show_hide_satellite_tab() {
            $.ajax({
                url: "{{ url_for('host_dashboard.api_get_satellite_count', hostname=host.hostname) }}",
                success: function(response) {
                    if (response.data.satellite_count > 0) {
                        $('.nav-tabs a[href="#satellites"]').show();
                        refresh_satellite_table();
                    } else {
                        $('.nav-tabs a[href="#satellites"]').hide();
                    }
                }
            });

        }

        setInterval(function() {
            get_host_dashboard_cookie();
            refresh_packages_tables();
            refresh_scheduled_install_table();
            refresh_install_job_history_table();
            refresh_inventory_job_history_table();
            show_hide_satellite_tab();
        }, 10000);


        function display_alert(can_schedule, can_install) {
            if (can_schedule) {
                $("#schedule-install-menu-item").removeClass("disabled");
            } else {
                $("#schedule-install-menu-item").addClass("disabled");
            }

            if (can_schedule && can_install) {
                $('#alerts').html('');
            } else {
                var cannot_html = ' the scheduling of any jobs';
                if (!can_install) {
                    if (!can_schedule) {
                        cannot_html = ' the scheduling of any new jobs and executing of any pending jobs';
                    } else {
                        cannot_html = ' the executing of any pending jobs';
                    }
                }

                $('#alerts').html(
                    '<div class="alert alert-danger"> ' +
                    '<strong>NOTICE:&nbsp;</strong>  ' +
                    'The system administrator has disabled ' + cannot_html + '.' +
                    '</div>');
            }
        }

        $("#manage-satellite-software").on("click", function() {
            display_manage_satellite_software_dialog();
        });

    });
</script>

<style>
    .btn-select {
        line-height: 10px;
    }
    a {
        outline: 0;
    }
    .dropdown-menu > .disabled {
        cursor: not-allowed;
    }
    /* The real magic ;) */

    .dropdown-menu > .disabled > a {
        pointer-events: none;
    }
    .modal-dialog {
        width: 900px;
    }
</style>
{% endblock %}

{% block main %}

{% include 'host/manage_satellite.html' %}

<!-- Main -->
<div class="container">
    <!-- upper section -->
    <div class="row">
        <div id="alerts"></div>
        <div class="col-sm-3">
            <!-- left -->
            <span class="DodgerBlue"><strong><i class="glyphicon glyphicon-signal"></i> Host: {{ host.hostname }}</strong></span>
            <hr>
            <div class="panel panel-info">
                <div class="panel-heading">General</div>
                <div class="panel-body" style="overflow:scroll;white-space: nowrap;">
                    <table id="host-info-table" class="table table-striped">
                    </table>
                </div>
            </div>
        </div>
        <div class="col-sm-9">
            <span class="DodgerBlue"><strong><i class="glyphicon glyphicon-briefcase"></i> Last Successful Retrieval: <span id="last_successful_inventory_elapsed_time"></span></strong></span>
            <div class="btn-group pull-right">
                <button id="installation-history-button" type="button" class="btn btn-default">Installation History</button>
                <button id="retreival-history-button" type="button" class="btn btn-default">Retrieval History</button>
                <div class="btn-group">
                    <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 id="schedule-install-menu-item"><a href="{{ url_for('install.host_schedule_install', hostname = host.hostname) }}?return_url=host_dashboard.home">Schedule an Installation</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript://" class="install-delete-all" status="scheduled" install-delete-url="{{ url_for('host_dashboard.delete_all_scheduled_installations_for_host', hostname = host.hostname) }}">Delete All Scheduled Installations</a></li>
                        <li><a href="javascript://" class="install-delete-all" status="failed" install-delete-url="{{ url_for('host_dashboard.delete_all_failed_installations_for_host', hostname = host.hostname) }}">Delete All Failed Installations</a></li>
                        <li class="divider"></li>
                        <li><a href="javascript://" id="retrieve-inventory" retrieve-inventory-url="{{ url_for('host_dashboard.get_inventory', hostname = host.hostname) }}" return-url="{{ url_for('host_dashboard.home', hostname = host.hostname) }}">Retrieve Latest Inventory</a></li>
                        <li class="divider"></li>
                        <li><a href="{{ url_for('home.host_edit', hostname = host.hostname) }}?return_url=host_dashboard.home">Edit Host</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="row">
                <!-- center left-->
                <div class="col-sm-6">
                    <div class="panel-group" id="accordion" >
                        {% for package_state in package_states %}
                        <div id="panel-{{ package_state }}" class="panel panel-info">
                            <div class="panel-heading">
                                <div class="panel-title">
                                    <a href="#collapse{{ package_state }}" data-toggle="collapse" data-parent="#accordion">
                                    <span style="font-size:14px;">{{ package_state }}</span>
                                    <i class="glyphicon glyphicon-plus-sign pull-right"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="panel-collapse collapse {% if loop.index == 1 %} in {% endif %}" id="collapse{{ package_state }}">
                                <div class="panel-body" style="overflow:scroll;white-space: nowrap;">
                                    <table  class="display table" id="{{ package_state }}">
                                        <thead class="hide-header">
                                            <tr>
                                                <th>&nbsp;</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /panel-info -->
                        {% endfor %}
                    </div>
                    <!-- /accordion -->
                </div>
                <!-- /center left-->
                <!--center right-->
                <div class="col-sm-6">
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <div class="panel-title">
                                <span style="font-size:14px;">
                                    <center>&nbsp; Scheduled/Failed Installations</center>
                                </span>
                            </div>
                        </div>
                        <div class="panel-body" style="overflow:scroll;white-space: nowrap;">
                            <table class="display table" id="scheduled-install-datatable" >
                                <thead>
                                    <tr>
                                        <th>Install Action</th>
                                        <th>Scheduled Time</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <!--/panel body-->
                    </div>
                    <!--/panel-->
                </div>
                <!-- /center right -->
            </div>
            <!-- /row -->
        </div>
    </div>
    <!-- /upper section -->
    <div id="host-tabs" class="row">
        <div class="col-sm-12">
            <hr>
            <a href="#" class="pull-right">
            Return to Top
            </a>
        </div>
    </div>
    <!-- /row -->
    <div class="container">
        <div class="row">
            <ul class="nav nav-tabs" id="host-dashboard-tab">
                <li><a data-toggle="tab" href="#installation-history">Installation History</a></li>
                <li><a data-toggle="tab" href="#retrieval-history">Retrieval History</a></li>
                <li><a data-toggle="tab" href="#inventory">Inventory</a></li>
                <li><a data-toggle="tab" href="#satellites">Satellites</a></li>
            </ul>
            <div class="tab-content">
                <div id="installation-history" class="tab-pane fade in active">
                    <div class="container col-sm-12" style="margin-top: 10px">
                        <table cellspacing="0" class="display table" id="installation-history-datatable">
                            <thead>
                                <tr>
                                    <th>Install Action</th>
                                    <th>Scheduled Time</th>
                                    <th>Start Time</th>
                                    <th>Packages</th>
                                    <th>Status</th>
                                    <th>Status Time</th>
                                    <th>Log</th>
                                    <th>Created By</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div id="retrieval-history" class="tab-pane fade">
                    <div class="col-sm-12" style="margin-top: 10px">
                        <!-- Inventory Job History Table -->
                        <table cellspacing="0" class="display table" id="retrieval-history-datatable">
                            <thead>
                                <tr>
                                    <th>Status</th>
                                    <th>Status Time</th>
                                    <th>Elapsed Time</th>
                                    <th>Log</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /Inventory Job History Table -->
                </div>
                <div id="inventory" class="tab-pane fade">
                    <div class="container col-sm-12" style="margin-top: 10px">
                         <table cellspacing="0" class="display table" id="inventory-datatable">
                            <thead>
                                <tr>
                                    <th>Location</th>
                                    <th>Model Name</th>
                                    <th>Name</th>
                                    <th>Description</th>
                                    <th>Serial Number</th>
                                    <th>VID</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
                <div id="satellites" class="tab-pane fade">
                    <div class="container col-sm-12" style="margin-top: 10px">
                        <button id="manage-satellite-software" class="btn btn-primary pull-right">Manage Software</button>
                    </div>
                    <div class="container col-sm-12" style="margin-top: 10px">
                         <table cellspacing="0" class="display table" id="satellite-datatable">
                            <thead>
                                <tr>
                                    <th>Satellite ID</th>
                                    <th>Type</th>
                                    <th>State</th>
                                    <th>Install State</th>
                                    <th>IP Address</th>
                                    <th>MAC Address</th>
                                    <th>Serial Number</th>
                                    <th>Remote Version</th>
                                    <th>Satellite<br>Fabric Links</th>
                                </tr>
                            </thead>
                         </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Main -->
{% endblock %}