<div class="app-modal-container">
    <!-- modal container -->
    <div class="modal fade" id="changePasswordModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        {{ 'ChangePassword' | translate }}
                    </h4>
                </div>
                <form role="form" class="ng-pristine ng-valid form-horizontal" name="form">

                    <div class="modal-body">

                        <div class="form-group" ng-class="{'has-error': form.oldpassword.$invalid && isSubmited}">
                            <label class="col-sm-3 control-label">{{ 'OldPassword' | translate }}:</label>
                            <div class="col-sm-8">
                                <input type="password" ng-model="oldpassword" name="oldpassword" class="form-control" required>
                            </div>
                            <p class="help-block" ng-show="form.oldpassword.$error.required">
                                <label> {{ 'RequiredInfo' | translate }} </label>
                            </p>
                        </div>
                        <div class="form-group" ng-class="{'has-error': form.newpassword.$invalid && isSubmited}">
                            <label class="col-sm-3 control-label">{{ 'NewPassword' | translate }}:</label>
                            <div class="col-sm-8">
                                <input type="password" ng-model="newpassword" name="newpassword" id="newpassword" class="form-control" required>
                            </div>
                            <p class="help-block col-sm-8 col-sm-offset-3">
                                <label>{{ 'NewPasswordTips' | translate }}</label>
                            </p>
                        </div>
                        <div class="form-group" ng-class="{'has-error': form.newpassword_verify.$invalid && isSubmited}">
                            <label class="col-sm-3 control-label">{{ 'ConfirmPassword' | translate }}:</label>
                            <div class="col-sm-8">
                                <input type="password" ng-model="newpassword_verify" name="newpassword_verify" class="form-control" required>
                            </div>
                            <p class="help-block">
                                <label ng-show="form.newpassword_verify.$error.required">{{ 'RequiredInfo' | translate }}</label>
                            </p>
                        </div>
                        <div ng-show="operationStatus>0" class="alert alert-info" title="success" role="alert">
                            {{ 'ChangePasswordSuccessInfo' | translate }}
                        </div>

                        <div ng-show="operationStatus<0" class="alert alert-danger" title="fail" role="alert">
                            {{ 'ChangePasswordFailInfo' | translate }} {{operationFailInfo}}
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ 'Close' | translate }}
                        </button>
                        <button type="button" ng-disabled="disableUpdate" class="btn btn-fix btn-primary" ng-click="changePassword()">
                            {{ 'Change' | translate }}
                        </button>
                    </div>

                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
        <!-- /.dropdown-user -->
    </div>

    <div class="modal fade" id="comfirmRemove" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        {{ 'Confirm' | translate }}
                    </h4>
                </div>
                <form role="form" class="ng-pristine ng-valid" name="form">
                    <div class="modal-body">
                        {{ 'ConfirmDelete' | translate }} ?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            {{ 'Close' | translate }}
                        </button>
                        <button type="button" ng-disabled="disableUpdate" class="btn btn-fix btn-primary" ng-click="comfirmClick()" data-dismiss="modal">
                            {{ 'Confirm' | translate }}
                        </button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
        <!-- /.dropdown-user -->
    </div>

    <div class="modal fade" id="addChart" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="vertical-alignment">
            <div class="modal-dialog vertical-align-center">
                <div class="modal-content modal-content-addchart">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            {{ 'AddChart' | translate }}
                        </h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="well">
                                    <div>
                                        <ul class="nav nav-list">
                                            <li>
                                                <input type="text" class="form-control search" placeholder="{{'SearchHintText'| translate}}" id="filter">
                                            </li>
                                        </ul>
                                        <ul class="nav nav-list" ng-repeat="(key,value) in systemchartDic" ng-show="!showSearch">
                                            <li class="divider"></li>
                                            <li>
                                                <label class="tree-toggle nav-header">{{key}}</label>
                                                <ul class="nav nav-list tree" ng-style="$index==0?showStyle:hideStyle">
                                                    <li>{{$parent.$index}}</li>
                                                    <li ng-repeat="item in value">
                                                        <a href="javascript:void(0);" ng-click="showDetail(item)">
                                                            {{item.systemChartName}}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <!--For search display-->
                                        <ul class="nav nav-list" ng-show="showSearch">
                                            <li class="divider"></li>
                                            <li>
                                                <label class="tree-toggle nav-header">{{ 'SearchResult' | translate }}</label>
                                                <ul class="nav nav-list tree" style="display:block;">
                                                    <li ng-repeat="item in queryResult">
                                                        <a href="javascript:void(0);" ng-click="showDetail(item)">
                                                            {{item.systemChartName | translate }}
                                                        </a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-8">
                                <div class="well">
                                    <div class="header">
                                        <span>{{chartName}}</span>
                                        <span style="display:inline">
                                            <button type="button" class="btn btn-fix btn-primary" data-dismiss="modal" style="float: right; margin-right:2%;" ng-click="confirmAdd()" ng-show="showAddButton">
                                                {{ 'AddChartButton' | translate }}
                                            </button>
                                        </span>
                                    </div>
                                    <div class="description">
                                        {{chartDescription}}
                                    </div>
                                    <div class="picture">
                                        <img src="{{imgUrl}}" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <!-- <button type="button" class="btn btn-default" data-dismiss="modal">
                             {{ 'Close' | translate }}
                         </button>  -->
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        $('.tree-toggle').click(function () {
            $(this).parent().children('ul.tree').toggle(200);
        });
    </script>
</div>