<div class="wrapper" ng-controller="navController">

    <header class="main-header">
        <a href="javascript:;" class="logo">
            <span class="logo-mini">{{app.ShortName}}</span>
            <span class="logo-lg">{{app.Name}}</span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="javascript:;" class="sidebar-toggle" data-toggle="offcanvas" role="button" ng-if="selectedSubModule != 'dashboard'">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="collapse navbar-collapse pull-left" ng-if="selectedSubModule != 'dashboard'">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="javascript:;">{{selectedSubMenu.MenuName}}</a>
                    </li>
                </ul>
            </div>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown user user-menu">
                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                            <img ng-src="main/img/avatar.png" class="user-image" alt="用户头像">
                            <span class="hidden-xs">{{auth.UserName}}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-header">
                                <img src="main/img/avatar.png" class="img-circle" alt="User Image">
                                <p>
                                    {{auth.UserName}}
                                </p>
                            </li>
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a ng-click="changePass()" class="btn btn-default btn-flat">修改密码</a>
                                </div>
                                <div class="pull-right">
                                    <a ng-click="logout()" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <aside class="main-sidebar" ng-if="selectedSubModule != 'dashboard'">
        <section class="sidebar">
            <ul class="sidebar-menu tree" data-widget="tree">
                <li class="treeview" ng-repeat="menu in menus track by menu.SystemMenuId" ng-click="selectMenu(menu)" ng-class="menu.SystemMenuId == selectedSubMenu.ParentMenuId ? 'menu-open active': ''">
                    <a href="javascript:;">
                        <i ng-class="{'fa fa-circle':!menu.FontIcon, '{{menu.FontIcon}}': !!menu.FontIcon}"></i>
                        <span>{{menu.MenuName}}</span>
                        <i class="fa fa-angle-left pull-right"></i>
                    </a>
                    <ul class="treeview-menu">
                        <li ng-repeat="submenu in menu.Children" ng-click="selectSubMenu(submenu)" ng-class="submenu.SystemMenuId == selectedSubMenu.SystemMenuId ? 'active': ''">
                            <a href="javascript:;" ui-sref="{{submenu.MenuUrl}}" ui-sref-opts="{location:true}" ng-if="submenu.MenuUrl">
                                <i ng-class="{'fa fa-circle-o':!submenu.FontIcon, '{{submenu.FontIcon}}': !!submenu.FontIcon}"></i> {{submenu.MenuName}}
                            </a>
                            <a href="javascript:;" ng-if="!submenu.MenuUrl">
                                <i ng-class="{'fa fa-ban link-black':!submenu.FontIcon, '{{submenu.FontIcon}}': !!submenu.FontIcon}"></i>
                                <span class="link-black">{{submenu.MenuName}}</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>

    <div class="content-wrapper">
        <section class="content">
            <div ui-view></div>
        </section>
    </div>

    <footer class="main-footer">
        <div class="pull-right hidden-xs" ng-if="app.Version">
            <b>Version</b> {{app.Version}}
        </div>
        <strong>&copy;{{copyrightYear}} ReCloud IT Co.,Ltd..</strong> All rights reserved.
    </footer>

    <style>
        .btn-toolbar .btn.inactive {
            background-color: #3c8dbc;
            color: #fff;
            border-color: rgba(255, 255, 255, 0.5);
        }

        .btn-toolbar .btn.active,
        .btn-toolbar .btn:hover,
        .btn-toolbar .btn:focus {
            background-color: #fff;
            color: #3c8dbc;
            border-color: #fff;
            outline: none;
            box-shadow: none;
        }
    </style>

    <div style="position:absolute;top:10px;z-index:1030;background:transparent;width:20%;margin-left:40%" class="container">
        <div class="row">
            <div class="center-block" style="width: 400px">
                <div class="btn-toolbar" role="toolbar">
                    <div class="btn-group btn-group-justified" role="group">
                        <div class="btn-group" role="group">
                            <button class="btn btn-default btn-sm" style="border-right:none;" ng-click="selectSubModule('dashboard')" ng-class="selectedSubModule=='dashboard' ? 'active': 'inactive'">
                                <i class="fa fa-tachometer"></i> 仪表板
                            </button>
                        </div>
                        <div class="btn-group" role="group">
                            <button class="btn btn-default btn-sm" style="border-right:none;" ng-click="selectSubModule('reportdata')" ng-class="selectedSubModule=='reportdata' ? 'active': 'inactive'">
                                <i class="fa fa-line-chart" aria-hidden="true"></i> 分析中心
                            </button>
                        </div>
                        <div class="btn-group" role="group">
                            <button class="btn btn-default btn-sm" style="border-right:none;" ng-click="selectSubModule('crm')" ng-class="selectedSubModule=='crm' ? 'active': 'inactive'">
                                <i class="fa fa-th-large" aria-hidden="true"></i> CRM
                            </button>
                        </div>
                        <div class="btn-group" role="group">
                            <button class="btn btn-default btn-sm" ng-click="selectSubModule('oa')" ng-class="selectedSubModule=='oa' ? 'active': 'inactive'">
                                <i class="fa fa-tasks" aria-hidden="true"></i> 办公
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>