{% extends 'base.html' %}

{% macro help_menu() %}
    <li><a href="{{ url_for('static', filename='documents/overview.pdf') }}">Overview</a></li>
    <li><a href="{{ url_for('static', filename='documents/home.pdf') }}">Home</a></li>
    <li><a href="{{ url_for('static', filename='documents/cco.pdf') }}">CCO</a></li>
    <li><a href="{{ url_for('static', filename='documents/host_dashboard.pdf') }}">Host Dashboard</a></li>
    <li><a href="{{ url_for('static', filename='documents/schedule_install.pdf') }}">Schedule Installation</a></li>
    <li><a href="{{ url_for('static', filename='documents/dashboards.pdf') }}">Dashboards</a></li>
    <li><a href="{{ url_for('static', filename='documents/conformance.pdf') }}">Conformance</a></li>
    {% if current_user.privilege == 'Admin' %}
    <li><a href="{{ url_for('static', filename='documents/admin_tools.pdf') }}">Admin Tools</a></li>
    {% endif %}
    <li><a href="{{ url_for('static', filename='documents/tools.pdf') }}">Tools</a></li>
    <li><a href="{{ url_for('static', filename='documents/inventory_manager.pdf') }}">Inventory Manager</a></li>
    <li><a href="{{ url_for('static', filename='documents/migration_to_asr9k_x64.pdf') }}">ASR9K to ASR9K-X64 Migration</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('static', filename='documents/api_guide.pdf') }}">API Guide</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('about') }}">About CSM Server</a></li>
{% endmacro %}

{% macro non_admin_tools_menu() %}
    <li><a href="{{ url_for('tools.host_list') }}">List/Edit/Delete Hosts</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('authenticate.current_user_edit') }}">Edit Current User</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('cco.optimize_software') }}">Optimize Software</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('cco.user_preferences') }}">User Preferences</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('tools.create_tar_file') }}">Create Tar File</a></li>
    {% if current_user.privilege == 'Admin' or current_user.privilege == 'Network Admin' %}
    <li class="divider"></li>
    <li><a href="{{ url_for('custom_command.home') }}">Custom Command Profile</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('asr9k_x64_migrate.migration') }}">ASR9K to ASR9K-X64 Migration</a></li>
    {% endif %}
{% endmacro %}

{% macro admin_tools_menu() %}
    <li><a href="{{ url_for('admin_console.home') }}">Admin Console</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('host_import.import_hosts') }}">Import Hosts</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('authenticate.user_create') }}">Create User</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('authenticate.user_list') }}">List/Edit/Delete Users</a></li>
    <li class="divider"></li>
    <li><a href="{{ url_for('log.logs') }}">System Logs</a></li>
{% endmacro %}

{% block base_head %}

<script charset="utf-8">
    var turn_on_alert = false;
    var alert_timer = null;
    var cms_messages = null;

    $(function() {
        $('#search-host-selector').select2({
            placeholder: "Search a host",
            allowClear: true,
            ajax: {
                url: "/api/get_hostnames/",
                dataType: 'json',
                processResults: function(data, page) {
                    return {
                        results: data.data
                    };
                },
                data: function(params) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },
            },
        });

        $('#search-host-selector').on('change', function(e) {
            var host = $(this).val();
            window.location = "/host_dashboard/hosts/" + host + "/";
            if (typeof(sessionStorage) !== "undefined") {
                sessionStorage.setItem('menu_selection', '');
            }
        });

        function create_dropdown_menu_for_cco() {
            $.ajax({
                url: "{{ url_for('cco.api_get_catalog') }}",
                dataType: 'json',
                success: function(data) {
                    var html = '';

                    $.each(data, function(index, element) {
                        for (i = 0; i < element.length; i++) {

                            var beautified_platform = element[i].beautified_platform
                            var platform = element[i].platform;
                            var releases = element[i].releases;

                            html += '<li class="dropdown-submenu">' +
                                '<a href="javascript://">' + beautified_platform + '</a>' +
                                '<ul class="dropdown-menu">';

                            for (var j = 0; j < releases.length; j++) {
                                html += '<li><a href="/cco/platform/' + platform + '/release/' + releases[j] + '">' + releases[j] + '</a></li>'
                            }

                            html += '</ul>' + '</li>'
                        }
                    });

                    $('#dropdown-menu').html(html);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    //bootbox.alert("Unable to retrieve catalog data");
                }
            });
        }

        create_dropdown_menu_for_cco();

        // test browser support on sessionStorage
        if (typeof(sessionStorage) !== "undefined") {
            var menu_selection = sessionStorage.menu_selection;

            if (menu_selection == undefined) {
                menu_selection = 'menu-option-1';
                sessionStorage.setItem('menu_selection', menu_selection);
            }

            function highlight_active_menu_link(menu_selection) {
                var current_active_menu_link = $('.menu li.active');
                if (current_active_menu_link.attr('id') != menu_selection) {
                    if (current_active_menu_link) {
                        current_active_menu_link.removeClass('active');
                    }
                    if (menu_selection) {
                        $('#' + menu_selection).addClass('active');
                    }
                }
            }

            highlight_active_menu_link(menu_selection);

            $('.menu li').on('click', 'a', function () {
                sessionStorage.setItem('menu_selection', $(this).parents('li').last().attr('id'));
            });
        } else {
            $('#menu-option-1').addClass('active');
        }

        function show_or_hide_navbar_menu() {
            if ($.cookie("inventory-nav-visibility") == '0') {
                $('#checkmark-inventory-menu').css('visibility', "hidden");
                $('#nav-inventory').css('visibility', "hidden");
                $('#nav-inventory').css('margin-bottom', "0px");
            } else {
                $('#checkmark-inventory-menu').css('visibility', "visible");
                $('#nav-inventory').css('visibility', "visible");
                $('#nav-inventory').css('margin-bottom', "40px");
            }
        }
        //show_or_hide_navbar_menu();

        $('#navbar-menus li').on('click', 'a', function() {
            if ($(this).attr('id') == 'inventory-menu') {
                var cookie_val = $.cookie("inventory-nav-visibility");
                if (cookie_val == '0') {
                    cookie_val = '1';
                } else {
                    cookie_val = '0'; // if cookie value of 1 or undefined, in both cases, toolbar should have been showing
                }
                $.cookie("inventory-nav-visibility", cookie_val, { path: '/' });
                show_or_hide_navbar_menu();
            }

        });

        $("#alert-icon").on("click", "#csm-alert-dialog", function() {
            if (csm_messages != null) {
                var html = '';

                for (i = 0; i < csm_messages.length; i++) {
                    html += "<b>" + csm_messages[i].date + "</b><br>";
                    html += csm_messages[i].message + "<br><br>";
                }

                $('#csm-message').html(html);
                $('#csm-message-dialog').modal({show: true, backdrop: 'static'});
            }
        });

        enable_alert(false);
        check_csm_messages();

        function check_csm_messages() {
            $.ajax({
                url: "{{ url_for('authenticate.api_get_csm_message') }}",
                dataType: 'json',
                type: "POST",
                success: function(data) {
                    $.each(data, function(index, element) {
                        if (element.length > 0) {
                            csm_messages = element;
                            start_blinking_alert();
                        } else {
                            csm_messages = null;
                            stop_blinking_alert();
                        }
                    });
                }
            });
        }

        function enable_alert(enabled) {
            if (enabled) {
                $('.glyphicon-bell').css("color", "red");
            } else {
                $('.glyphicon-bell').css("color", "");
            }
        }

        function start_blinking_alert() {
            $('#alert-icon').html('<a href="#" id="csm-alert-dialog"><span class="glyphicon glyphicon-bell" title="Click to view alerts" style="top:5px;"></span></a>');
            alert_timer = setInterval(function () {
                if (turn_on_alert) {
                    turn_on_alert = false;
                    enable_alert(true);
                } else {
                    turn_on_alert = true;
                    enable_alert(false);
                }
            }, 500);
        }

        function stop_blinking_alert() {
            if (alert_timer != null) {
                clearInterval(alert_timer);
                alert_timer = null;
            }
            //enable_alert(false);
            $('#alert-icon').html('');
        }

        $("#on-acknowledge-submit").on("click", function() {
            $.ajax({
                url: "{{ url_for('authenticate.api_acknowledge_csm_message') }}",
                dataType: 'json',
                type: "POST",
                success: function(data) {
                    $('#csm-message-dialog-form').hide();
                    stop_blinking_alert();
                }
            });
        });

    });

</script>

{% endblock %}

{% block menu_bar %}
<div id="csm-message-dialog" class="modal" role="dialog">
    <div style="width:800px;" class="modal-dialog">
        <form id="csm-message-dialog-form" method="post" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Notification from Cisco</h4>
                </div>
                <div class="modal-body">
                    <div style="height:350px; overflow-y: scroll;" id="csm-message"></div>
                </div>
                <div class="modal-footer">
                    Once the notification is acknowledged, it will not be displayed again.
                    <div class="form-actions">
                        <div class="btn col-sm-offset-4">
                            <button id="on-acknowledge-submit" class="btn btn-primary" data-dismiss="modal">Acknowledge</button>
                            <button id="on-cancel" onclick="submit_form();" class="btn" data-dismiss="modal">Later</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="navbar-header">
        <a class="navbar-brand" style="padding:10px; padding-left: 30px;" href="#"><img src="{{ url_for('static', filename='logo.png') }}"></a>
        <a class="navbar-brand" href="#">CSM Server</a>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav menu">
            {% if current_user.is_authenticated() %}
            <li id="menu-option-1"><a href="{{ url_for('home') }}">Home</a></li>
            <ul class="nav navbar-nav">
                <li id="menu-option-2" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">CCO<b class="caret"></b></a>
                    <ul id="dropdown-menu" class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"></ul>
                </li>
            </ul>
            <li id="menu-option-3" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dashboards<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="{{ url_for('install_dashboard.home') }}">Install Dashboard</a></li>
                    <li class="divider"></li>
                    <li><a href="{{ url_for('download_dashboard.home') }}">CCO Download Dashboard</a></li>
                </ul>
            </li>
            <li id="menu-option-4"><a href="{{ url_for('conformance.home') }}">Conformance</a></li>
            {% endif %}
        </ul>
        {% if current_user.is_authenticated() %}
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Help<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    {{ help_menu() }}
                </ul>
            </li>

            <!--
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <div class="btn-group">
                        <button type="button" class="navbar-toggle" style="padding: 0px 0px;margin-top: 0px;margin-bottom: 0px;">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                </a>

                <ul class="dropdown-menu dropdown-menu-right" id="navbar-menus">
                    <li><a href='#' id='inventory-menu'><b id='checkmark-inventory-menu'>&#10003</b>&nbsp;&nbsp;Inventory Manager</a></li>
                </ul>
            </li>
            -->

            <li><a href="{{ url_for('authenticate.logout') }}" ><img title="Logout" src="{{ url_for('static', filename='logout.png') }}"></a></li>

            <li id="alert-icon">

            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right menu">
            <li id="menu-option-5" class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<b class="caret"></b></a>
                {% if current_user.privilege == 'Admin' %}
                <ul class="dropdown-menu multi-column columns-2">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                {{ non_admin_tools_menu() }}
                            </ul>
                        </div>
                        <div class="col-sm-6">
                            <ul class="multi-column-dropdown">
                                {{ admin_tools_menu() }}
                            </ul>
                        </div>
                    </div>
                </ul>
                {% else %}
                <ul class="dropdown-menu">
                    {{ non_admin_tools_menu() }}
                </ul>
                {% endif %}
            </li>
        </ul>
        <form class="navbar-form navbar-left pull-right" role="search">
            <div class="form-group" style="padding:5px">
                <input type="hidden" class="select2" id="search-host-selector" style="width:200px;margin-left:2em;margin-top:.4em;">
                </select>
            </div>
        </form>
        {% endif %}
    </div>

    <!--/.nav-collapse -->
</div>

<!-- inventory navbar below -->
{% if current_user.is_authenticated() %}
<div class="navbar container navbar-default" style="visibility:hidden;width:100%;" id="nav-inventory" role="navigation">

    <div class="navbar-header" style="margin-top:16px;padding-left: 30px;padding-right: 10px;">
        <i class="glyphicon glyphicon-tags"></i>
    </div>

    <ul class="nav navbar-nav menu">
        {% if current_user.is_authenticated() %}
            <li id="menu-option-6"><a class="nav-link" href="{{ url_for('inventory.dashboard') }}">Inventory Dashboard</a></li>
            <li id="menu-option-7"><a class="nav-link" href="{{ url_for('inventory.query_add_inventory') }}">Query/Add Inventory</a></li>
            <li id="menu-option-8"><a class="nav-link" href="{{ url_for('inventory.search_inventory') }}">Search</a></li>
            {% if current_user.privilege == 'Admin' or current_user.privilege == 'Network Admin'%}
                <li id="menu-option-9"><a class="nav-link" href="{{ url_for('inventory.import_inventory') }}">Import Inventory</a></li>
            {% endif %}
        {% endif %}
    </ul>

</div>
{% else %}
    <div style="padding-bottom: 46px"></div>
{% endif %}
    <!--/.nav-collapse -->

{% endblock %}