<html>
    <head>
        <link href="/static/css/bootstrap.min.css" rel="stylesheet">
        <link href="/static/font-awesome/css/font-awesome.css" rel="stylesheet">
        <link href="/static/css/plugins/iCheck/custom.css" rel="stylesheet">
        <link href="/static/css/animate.css" rel="stylesheet">
        <link href="/static/css/style.css" rel="stylesheet">

        <script src="/static/js/jquery-2.1.1.js"></script>
{#        <style>#}
{#            body {background: #ffffff;}#}
{#        </style>#}
    </head>

{% load bootstrap %}
{% block content %}

<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-10">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 class="text-center"> 填写修改主机信息. </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user"></ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

            <div class="ibox-content">
                <form class="form-horizontal" action="" id="signupForm"  method="post" name="horizontal" role="form" autocomplete="off">
                {% csrf_token %}
                    <input id="ids" style="display: none">
                    {{ af.env|bootstrap_horizontal }}

                    <div class="hr-line-dashed"></div>
                    {{ af.idc|bootstrap_horizontal }}

                    <div class="hr-line-dashed"></div>
                    {{ af.port|bootstrap_horizontal }}

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label for="j_group" class="col-sm-2 control-label">管理账号</label>
                        <div class="col-sm-2">
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" checked="" value="no_action" id="no" name="use_default_auth" class="auth"><span> 不修改 </span>
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" id="default" name="use_default_auth" class="auth"><span> 使用默认 </span>
                                </label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" id="pass" name="use_default_auth" class="auth"><span> 用户名密码 </span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group" id="admin_account" style="display: none">
                        <label class="col-sm-2 control-label"> 管理用户名<span class="red-fonts"> *</span></label>
                        <div class="col-sm-3">
                            <input type="text" placeholder="Username" name="username" class="form-control">
                        </div>

                        <label class="col-sm-1 control-label"> 密码<span class="red-fonts">*</span> </label>
                        <div class="col-sm-4">
                            <input type="password" placeholder="Password" name="password" class="form-control">
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label for="groups" class="col-sm-2 control-label">所属主机组</label>

                        <div class="col-sm-3">
                            <select id="groups" size="10" class="form-control m-b" multiple>
                            {% for asset_group in asset_group_all %}
                                    <option value="{{ asset_group.id }}">{{ asset_group.name }}</option>
                            {% endfor %}
                            </select>
                        </div>
                        <div class="col-sm-1">
                            <div class="btn-group" style="margin-top: 50px;">
                                <button type="button" class="btn btn-white" onclick="move_right('groups', 'groups_selected')"><i class="fa fa-chevron-right"></i></button>
                                <button type="button" class="btn btn-white" onclick="move_left('groups_selected', 'groups')"><i class="fa fa-chevron-left"></i> </button>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div>
                                <select id="groups_selected" name="project" class="form-control m-b" size="10"  multiple>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    {{ af.cabinet|bootstrap_horizontal }}

                    <div class="hr-line-dashed"></div>
                    {{ af.comment|bootstrap_horizontal }}
                    <div class="hr-line-dashed"></div>

                   <div class="form-group">
                       <div class="col-sm-4 col-sm-offset-5">
                           <button class="btn btn-white" type="submit"> 重置 </button>
                           <button class="btn btn-primary" id="host_edit"> 提交 </button>
                       </div>
                   </div>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $('#host_edit').click(function () {
            var args = {};
            var match = null;
            var uuid = decodeURIComponent(location.search.substring(1));
            var reg = /(?:([^&amp;]+)=([^&amp;]+))/g;
            while((match = reg.exec(uuid))!==null){
                args[match[1]] = match[2];
            }
            var ids = args['uuid'];
            $('#uuid').val(ids)
        });

        $('.auth').click(function(){
            if ($(this).attr('id') == 'pass'){
                $('#admin_account').css('display', 'block')
            }
            else {
                $('#admin_account').css('display', 'none')
            }
        })
    });

    function move_left(from, to) {
        $("#"+from+" option").each(function(){
            if ( $(this).prop("selected") == true ) {
                $("#"+to).append(this);
                $(this).attr("selected",'false');
            }
            $(this).attr("selected",'true');
        });
    }
    function move_right(from, to) {
        $("#"+from+" option").each(function(){
            if ( $(this).prop("selected") == true ) {
                $("#"+to).append(this);
            }

        });
    }

    function move_all(from, to){
        $("#"+from).children().each(function(){
            $("#"+to).append(this);
        });
    }
</script>
{% endblock content %}
</body>
</html>

