<!-- top navigation -->
<div class="top_nav navbar-fixed-top">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle" ng-click="redrawChartToggle()"><i class="fa fa-bars"></i></a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li class="">
                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
                       aria-expanded="false">
                        <!--<i class="fa fa-user"></i>-->
                        <img src="theme/img/profile.jpg" alt="">
                        <span>{{userName}}</span>
                        <span class="fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-usermenu pull-right" style="z-index: 9990!important;">
                        <li><a ng-bind="user.mail_address"></a></li>
                        <li>
                            <a ui-sref="userProfile">
                                <i class="fa fa-cog"></i>
                                <span ng-i18next="label.user.settings">Setting</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://689cloud.com/sd-support-center.html">
                                <i class="fa fa-question-circle" aria-hidden="true"></i>
                                <span ng-i18next="label.user.help">Help</span>
                            </a>
                        </li>
                        <li>
                            <a id="logoutLink" ng-click="doLogout()">
                                <i class="fa fa-sign-out"></i>
                                <span data-hg="header.logout" ng-i18next="session.logout"></span>
                            </a>
                        </li>
                    </ul>
                </li>
                <!--Notification panel-->
                <li role="presentation" class="dropdown" ng-if="isShowMailBox">
                    <a id="global_notification" class="dropdown-toggle info-number"
                       aria-expanded="false" role="button" data-toggle="dropdown" data-target="#"
                       href="#" ng-click="loadMessage(false)">
                        <!--<i class="glyphicon glyphicon-globe"></i>-->
                        <i class="fa fa-envelope-o"></i>
                        <span ng-show="isShowNumberOfNotify"
                              class="badge bg-green notify-number hidden-sm-phone">{{countNumberNotification}}</span>
                    </a>

                    <ul class="dropdown-menu list-unstyled msg_list" role="menu"
                        aria-labelledby="global_notification" style="z-index: 98 !important;">

                        <div class="notifications-wrapper" selectonic>

                            <div style="text-align: center;" ng-show="loadWaiting">
                                <img src="img/loadder/loading_spinner.gif" width="100px"/>
                            </div>

                            <li class="content" ng-if="listMessage.length === 0">
                                <h5 class="text-center">

                                    <span ng-i18next="message.no_message">No message</span>
                                </h5>
                            </li>
                            <li ng-repeat="message in listMessage">
                                <a ui-sref="projectDetail({id: message.project_id, folder_id: 0})">
                                    <span class="title custome-name-wrap">{{getText(message)}}</span>
                                    <span class="time hidden-xs">{{getMessageTime(message)}}</span>

                                    <span class="message custome-name-wrap"
                                          mytip='{{getContent(message)}}'>{{getContent(message)}}</span>
                                    <span class="time-xs hidden-lg hidden-md hidden-sm">{{getMessageTime(message)}}</span>
                                </a>
                            </li>
                        </div>

                        <div ng-class="isEventLoading ? 'fadeIn' : 'fadeOut'"
                             class="waiting text-center">
                            <img src="img/loadder/loading_spinner.gif" height="50px"/>
                        </div>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- /top navigation -->

<!-- left sidebar -->
<div class="col-md-3 left_col menu_fixed">
    <div class="left_col scroll-view">
        <div class="navbar nav_title nav-bar-bg">
            <div class="site_title text-center">
                <img class="small-logo" alt="689Cloud" ng-src="{{logo.SMALL}}"/>
            </div>
        </div>

        <!-- sidebar menu -->
        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div ng-switch="user.role_id" class="menu_section_">
                <!--Company admin-->
                <ul class="nav side-menu" ng-switch-when="5">
                    <li ng-class="{'current-page': menu === 5}">
                        <a ui-sref="teamList">
                            <i class="fa fa-users"></i>
                            <span ng-i18next="navi.team">Teams</span>
                        </a>
                    </li>
                    <li ng-class="{'current-page': menu === 9}">
                        <a ng-click="goUsagePackages()">
                            <i class="fa fa-credit-card-alt" aria-hidden="true"></i>
                            <span ng-i18next="navi.pricingPackagePlan">Usage Packages</span>
                        </a>
                    </li>
                    <li ng-class="{'current-page': menu === 6}">
                        <a ui-sref="dashboard">
                            <i class="fa fa-line-chart"></i>
                            <span ng-i18next="navi.dashboard">Dashboard</span>
                        </a>
                    </li>
                </ul>

                <!-- Super Admin -->
                <ul class="nav side-menu" ng-switch-when="0">
                    <li ng-class="{'current-page': menu === 7}">
                        <a ui-sref="companyList">
                            <i class="fa fa-users"></i>
                            <span ng-i18next="navi.company">Companies</span>
                        </a>
                    </li>
                    <li ng-class="{'current-page': menu === 9}">
                        <a ng-click="goUsagePackages()">
                            <i class="fa fa-credit-card-alt" aria-hidden="true"></i>
                            <span ng-i18next="navi.pricingPackagePlan">Usage Packages</span>
                        </a>
                    </li>
                    <li ng-class="{'current-page': menu === 8}">
                        <a ui-sref="adminDashboard">
                            <i class="fa fa-line-chart"></i>
                            <span ng-i18next="navi.dashboard">Dashboard</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /sidebar menu -->
    </div>
</div>

<!-- page content -->
<div class="right_col" role="main">
    <div class="main-loading" ng-show="loading">
        <div class="lds-ripple">
            <div></div>
            <div></div>
        </div>
    </div>
    <div class="mt-57">
        <div class="alert alert-notify-trial active-payment alert-dismissible text-center mt-15" role="alert"
             ng-show="isTrialUser">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span></button>

            <a ui-sref="activePayment" class="color-white">
                <span>{{expiryTrialDays}}</span>
                <span ng-i18next="label.user.remain_trial_message">!</span>
            </a>
        </div>
        <div class="mt-12" ui-view></div>
    </div>
</div>
<!-- /page content -->
