<!DOCTYPE html>
<html lang="en" data-ng-app="whatsspy">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Maikel Zweerink@gitlab.maikel.pro">
        <title>WhatsSpy Public</title>
        <link rel="stylesheet" href="css/vendor/bootstrap.min.css">
        <link rel="stylesheet" href="css/vendor/nv.d3.min.css">
        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" href="css/vendor/vis.min.css" />
        <link rel="stylesheet" href="css/alertify.core.css" />
        <link rel="stylesheet" href="css/alertify.default.css" />
        <link rel="icon" sizes="196x196" href="app-icon.png">
        <script src="js/vendor/jquery-2.1.3.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/vendor/angular.min.js"></script>
        <script src="js/vendor/angular-route.min.js"></script>
        <script src="js/vendor/moment.min.js"></script>
        <script src="js/vendor/moment-timezone.min.js"></script>
        <script src="js/vendor/angular-moment.min.js"></script>
        <script src="js/vendor/vis.min.js"></script>
        <script src="js/vendor/d3.min.js"></script>
        <script src="js/vendor/nv.d3.min.js"></script>
        <script src="js/vendor/angular-bootstrap-multiselect.js"></script>
        <script src="js/vendor/angularjs-nvd3-directives.min.js"></script>
        <script src="js/vendor/angular-vis.js"></script>
        <script src="js/vendor/alertify.min.js"></script>
        <script src="js/vendor/translate.min.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/app.js"></script>
        <script src="js/translate.js"></script>
    </head>
    <body data-ng-controller="MainController">
        <div class="container">
            <header id="header">
                <div class="row">
                    <div class="col-md-1 col-xs-12 hidden-xs icon-container">
                        <img class="app-icon" src="app-icon-big.png" />
                    </div>
                    <div class="col-md-1 col-xs-12 visible-xs icon-container">
                        <img class="app-icon-small" src="app-icon-big.png" /> <span class="app-name"><strong>W</strong>hatsSpy Public</span>
                    </div>
                    <div class="col-md-8 col-md-offset-1 col-xs-12">
                        <ul class="options-large">
                            <li data-ng-show="authenticated == false">
                                <a href="#/login" data-ng-class="getActivePageClass('login')">
                                    <span class="setting-icon glyphicon glyphicon-bell"></span><br />
                                    {{'MENU_LOGIN' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="authenticated == true && !isInPage('public')">
                                <a href="#/overview" data-ng-class="getActivePageClass('overview')">
                                    <span class="setting-icon glyphicon glyphicon-list"></span><br />
                                    {{'MENU_OVERVIEW' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="authenticated == true && !isInPage('public')">
                                <a href="#/compare" data-ng-class="getActivePageClass('compare')">
                                    <span class="setting-icon glyphicon glyphicon-scale"></span><br />
                                    {{'MENU_COMPARE' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="authenticated == true && !isInPage('public')">
                                <a href="#/timeline" data-ng-class="getActivePageClass('timeline')">
                                    <span class="setting-icon glyphicon glyphicon-time"></span><br />
                                    {{'MENU_TIMELINE' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="authenticated == true && !isInPage('public')">
                                <a href="#/statistics" data-ng-class="getActivePageClass('statistics')">
                                    <span class="setting-icon glyphicon glyphicon-signal"></span><br />
                                    {{'MENU_STATS' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="authenticated == true && !isInPage('public')">
                                <a href="#/about" data-ng-class="getActivePageClass('about')">
                                    <span class="setting-icon glyphicon glyphicon-blackboard"></span><br />
                                    {{'MENU_ABOUT' | translate}}
                                    <span class="label label-danger label-notification" data-ng-show="aboutNotifications > 0">{{aboutNotifications}}</span>
                                </a>
                            </li>
                            <li data-ng-show="isInPage('public/user')">
                                <a href="#" onclick="return false;" data-ng-class="getActivePageClass('public/user')">
                                    <span class="setting-icon glyphicon glyphicon-tag"></span><br />
                                    {{'MENU_USER' | translate}}
                                </a>
                            </li>
                            <li data-ng-show="isInPage('public/group')">
                                <a href="#" onclick="return false;" data-ng-class="getActivePageClass('public/group')">
                                    <span class="setting-icon glyphicon glyphicon-tags"></span><br />
                                    {{'MENU_GROUP' | translate}}
                                </a>
                            </li>
                        </ul>
                        <div id="loader" data-ng-show="showLoader == true" data-ng-attr-title="{{'MENU_LOADING' | translate}}"></div>
                    </div>
                    <div class="col-md-2 col-xs-12" data-ng-hide="isInPage('public') == true">
                        <div id="status">
                            <strong><span class="setting-icon glyphicon glyphicon-tasks"></span> {{'MENU_STATUS' | translate}}</strong>
                            <br />
                            <span data-ng-cloak data-ng-show="trackerStatus() == 'online'" class="label label-success">{{'MENU_TRACKER_ONLINE' | translate}}</span>
                            <span data-ng-cloak data-ng-show="trackerStatus() == 'offline'" class="label label-danger">{{'MENU_TRACKER_OFFLINE' | translate}}</span>
                            <span data-ng-cloak data-ng-show="trackerStatus() == 'unknown'" class="label label-default">{{'MENU_TRACKER_NOAUTH' | translate}}</span>
                            <span data-ng-cloak data-ng-show="trackerStatus() == 'online'" class="label label-info">{{accounts.length}} {{'MENU_TRACKER_USERS' | translate}}</span>
                            <span data-ng-show="trackerStatus() != 'unknown'" data-ng-click="refreshContent()" data-ng-cloak class="label label-default whatsspy-data-management" data-toggle="tooltip" data-placement="bottom" data-ng-attr-title="{{'MENU_TRACKER_REFRESH' | translate}}"><span am-time-ago="loadedTime"></span></span>
                        </div>
                    </div>
                </div> 
            </header>
            <div data-ng-show="error == true" class="alert alert-danger" role="alert">
                <strong>It seems like WhatsSpy Public is not working correctly.</strong> Please take a look at <a target="_blank" href="https://gitlab.maikel.pro/maikeldus/WhatsSpy-Public/wikis/troubleshooting">the troubleshooting page</a>.
                <br />
                <br />
                <strong><a href="api/?whatsspy=getStats">View error</a></strong>
            </div>
            <div id="page" >
                <div data-ng-view></div>
            </div>
            <footer class="row">
                <div class="col-xs-12 version">
                    WhatsSpy Public - <a href="https://gitlab.maikel.pro/maikeldus/WhatsSpy-Public/wikis/home" target="_blank">{{'MENU_POC' | translate}}</a>
                    <span class="float-right">{{'FOOTER_VERSION' | translate}} <a href="https://gitlab.maikel.pro/maikeldus/WhatsSpy-Public/wikis/updates" target="_blank">{{version}}</a> <strong class="update-behind" data-ng-show="version != newestVersion && tokenAuth == null"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> {{'FOOTER_V_BEHIND' | translate}}.</strong></span> 
                </div>
            </footer>
            <audio id="notification">  
               <source id="notificationSource" src="sound/default.mp3" type="audio/mp3" />  
            </audio> 
        </div>
    </body>
</html>
