<div class="user-manage">
    <div class="menu-header">
        <div class="menu-title">{{'UserManagement' | translate}}</div>
        <div class="menu-log">
            <a class="btn btn-not-important" href="javascript:void(0)" ng-click="showOperateLogPop()"> <i class="material-icons">description</i><span>日志</span></a>
        </div>
    </div>
    <div class="content-container">
        <div class="left-container">
            <div class="user-list-container">
                <div class="search-container">
                    <input class="search-input" type="text" value="" placeholder="{{'Search' | translate}}" ng-model="searchText" /><span class="glyphicon glyphicon-search input-group-addon search-icon"></span>
                </div>
                <div class="search-btn-container">
                    <button class="btn btn-in-panel-big" ng-click="newUser()"><i class="material-icons button-icons">add_circle_outline</i> {{'AddUser' | translate}}</button>
                </div>
                <div class="user-tree-container">
                    <script type="text/ng-template" id="user-tree-template">
                        <div ui-tree-handle ng-class="{true:'tree-item-select',false:''}[user.id===selectUser.id && !(user.subUsers && user.subUsers.length>0)]" ng-if="searchText === '' || user.userName.toLowerCase().indexOf(searchText.toLowerCase()) > -1" style="padding-left:45px;border-radius:5px">
                            <div ng-if="user.subUsers && user.subUsers.length>0" class="expander" style="line-height:20px;" ng-class="{true:'tree-item-select',false:''}[user.id===selectUser.id && !(user.subUsers && user.subUsers.length>0)]">
                                <i class="fa fa-plus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: !collapsed}"></i>
                                <i class="fa fa-minus tree-i" aria-hidden="true" ng-click="toggle(this)" ng-class="{hidden: collapsed}"></i>
                            </div>
                            <span ng-if="user.subUsers && user.subUsers.length>0" ng-bind-template="{{user.userName}}" ng-click="selectedUser(user);" class="root-node"></span>

                            <span ng-if="!(user.subUsers && user.subUsers.length>0)" ng-bind-template="{{user.userName}}" ng-click="selectedUser(user);" class="sub-node" ng-class="{true:'tree-item-select',false:''}[user.id===selectUser.id]"></span>
                        </div>

                        <ol ui-tree-nodes="" ng-model="user.subUsers" ng-class="{hidden:collapsed}">
                            <li ng-repeat="user in user.subUsers" ui-tree-node ng-include="'user-tree-template'">
                            </li>
                        </ol>
                    </script>
                    <div class="user-tree">
                        <div ui-tree id="tree-root" data-drag-enabled="true">
                            <ol ui-tree-nodes ng-model="userList">
                                <li ng-repeat="user in userList" ui-tree-node ng-include="'user-tree-template'">

                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="right-container">
            <div class="no-data-container">
                <div class="no-data-icon-container">
                    <div class="no-data-icons">
                        <i class="material-icons no-data-icon">supervisor_account</i>
                    </div>
                </div>

                <div class="no-data-desc">
                    {{'NoUserData' | translate}}
                </div>
            </div>
            
            <div class="data-container">
                <div class="user-info-container">
                    <p class="user-name">{{selectUser.userName}}</p>
                    <p class="user-info-detail">
                        <i class="material-icons">business</i>
                        <span>
                            {{'Company' | translate}}{{selectUser.OrgName === '' ? '无':selectUser.OrgName}}
                        </span>
                    </p>
                    <p class="user-info-detail">
                        <i class="material-icons">person</i>
                        <span>
                            {{'Status' | translate}}
                            <i class="material-icons" ng-if="selectUser.status==1" style="color: #F67400; vertical-align: bottom;">check_circle</i>
                            <i class="material-icons" ng-if="selectUser.status==0">remove_circle</i>
                            <span style="vertical-align: baseline;">{{selectUser.statusName}}</span>
                        </span>
                    </p>
                    <p class="user-info-detail">
                        <i class="material-icons">email</i>
                        <span>{{'E-mail' | translate}}{{selectUser.email===null ? '无':selectUser.email }}</span>
                    </p>
                </div>
                <div class="user-info-operate-container">
                    <button type="button" class="btn btn-primary" ng-click="loadUser(selectUser.id)" translate="Change"></button>
                    <button type="button" class="btn btn-secondary" ng-if="selectUser.status==0" ng-click="enableUser(selectUser.id)" translate="Enable"></button>
                    <button type="button" class="btn btn-third" ng-if="selectUser.status==1" ng-click="disableUser(selectUser)" translate="StopUse"></button>
                </div>
                <div class="user-project-container">
                    <p translate="UserProjects"></p>
                    <div class="assign-user-box">
                        <div class="up-triangle"><img src="/Content/images/triangle_up.png" /></div>
                        <div class="role-item-container">
                            <div class="role-item" ng-if="roleList.length==0" translate="NoRolesToAssign"></div>
                            <div class="role-item" ng-repeat="role in roleList">
                                <input type="checkbox" value="role.id" ng-model="role.isChecked" ng-click="setRoleToProject(role)" /> {{role.name}}
                            </div>
                        </div>
                    </div>
                    <div class="project-list-container">
                        <div class="buttons">
                            <button class="btn btn-in-grid" ng-click="addProjectPopUp()">
                                <i class="material-icons">add_circle_outline</i> <span translate="AssignProject"></span>
                            </button>
                            <button class="btn btn-in-grid" ng-click="removeProject()">
                                <i class="material-icons">remove_circle</i> <span translate="DeleteProject"></span>
                            </button>
                        </div>
                        <div class="list-container">
                            <div class="project-list-grid" ui-grid="gridOptionsProjectList" ui-grid-selection ui-grid-auto-resize ng-style="getGridHeight()"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="user-info-dialog">
        <div class="modal fade" id="addUserPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="width:650px;height:200px;" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title" ng-if="isAdd" translate="AddUser"></div>
                        <div class="modal-title" ng-if="!isAdd">{{'EditUser' | translate}}-{{editUserModel.UserName}}</div>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" role="form" id="userForm">
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="checkIsAdmin" translate="Admin"></label>
                                <div class="col-sm-9">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" ng-model="editUserModel.IsAdmin"> Admin
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="inputUserName" translate="UserName"></label>
                                <div class="col-sm-9">
                                    <input id="inputUserName" type="text" name="inputUserName" class="form-control" style="width: 300px;" placeholder="{{'PUserName'|translate}}" ng-model="editUserModel.UserName" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="inputUserEmail" translate="E-mail"></label>
                                <div class="col-sm-9">
                                    <input id="inputUserEmail" type="email" name="inputUserEmail" class="form-control" style="width: 300px;" placeholder="{{'PE-mail'|translate}}" ng-model="editUserModel.Email" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" translate="Company"></label>
                                <div class="col-sm-9">
                                    <org-selector selected-org-name="editUserModel.OrgName" selected-org-id="editUserModel.OrganizationID" component-selected-org="" is-show-all=false></org-selector>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-sm-3" translate="DefaultRole"></label>
                                <div class="col-sm-9">
                                    <role-multi-selector selected-role-ids="editUserModel.RoleIDs" selected-role-names="editUserModel.RoleNames"></role-multi-selector>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="saveUser()" translate="Confirm"></button>
                        <button type="button" class="btn btn-third" data-dismiss="modal" translate="Cancel"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="all-project-list-dialog">
        <div class="modal fade" id="addProjectPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" style="width: 950px; height: 200px;" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title" translate="ProjectList"></div>
                    </div>
                    <div class="modal-body">
                        <div class="all-project-list-grid" ui-grid="gridOptionsAllProjectList" ui-grid-selection></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" ng-click="addProject()" translate="Confirm"></button>
                        <button type="button" class="btn btn-third" data-dismiss="modal" translate="Cancel"></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <operate-log is-show="isShowLog"></operate-log>
</div>