window.onload = function () {
    var app = new Vue({
        el: '#app',
        data: {
        }
    });
};

Vue.component('page_header', {
    data: function () {
        return {
            items: []
        }
    },    

    template: '<nav class="navbar fixed-top navbar-expand-md bg-primary navbar-dark bg-dark">\
                 <div class= "container-fluid" >\
                    <!--Brand-->\
                    <a class="navbar-brand" href="index.html">NextPVR</a>\
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">\
                        <span class="navbar-toggler-icon"></span>\
                    </button>\
                    <!--Navbar links-->\
                    <div class="collapse navbar-collapse" id="collapsibleNavbar">\
                        <ul class="navbar-nav">\
                            <li id="nav-channels" class="nav-item">\
                                <a class="nav-link" href="channels.html">Channels</a>\
                            </li>\
                            <li id="nav-guide" class="nav-item">\
                                <a class="nav-link" href="guide.html">TV Guide</a>\
                            </li>\
                            <li id="nav-search" class="nav-item">\
                                <a class="nav-link" href="search.html">Search</a>\
                            </li>\
                            <li id="nav-recordings" class="nav-item">\
                                <a class="nav-link" href="recordings.html">Recordings</a>\
                            </li>\
                            <li id="nav-scheduler" class="nav-item">\
                                <a class="nav-link" href="scheduler.html">Scheduler</a>\
                            </li>\
                        </ul>\
                        <ul class="nav navbar-nav ml-auto">\
                            <li id="nav-settings" class="nav-item d-none">\
                                <a class="nav-link" href="settings.html">Settings <i class="fa fa-cog"></i></a>\
                            </li>\
                            <li id="nav-help" class="nav-item">\
                                <a class="nav-link" href="help.html">Help <i class="fa fa-question-circle"></i></i></a>\
                            </li>\
                        </ul>\
                    </div>\
                </div>\
            </nav>',
    mounted: function () {                
        //if (sessionStorage.getItem("allow_settings") == null || sessionStorage.getItem("allow_settings") == "false") {
        if (sessionStorage.getItem("allow_settings") == null) {
            var self = this;
            var url = 'services/service?method=session.permissions';
            $.getJSON(url, function (data) {
                sessionStorage.setItem("allow_settings", data.allow_settings);
                sessionStorage.setItem("allow_delete", data.allow_delete);
                sessionStorage.setItem("allow_schedule", data.allow_schedule);
                sessionStorage.setItem("allow_watch", data.allow_watch);
                if (data.allow_settings) {
                    $("#nav-settings").removeClass("d-none");
                }                
            }).fail(function (e) {
                console.log("error");
            });
        }
        else {     
            var allow_settings = sessionStorage.getItem("allow_settings");
            if (allow_settings == "true") {
                $("#nav-settings").removeClass("d-none");
            }
        }
    }
});
