{% extends 'base.html' %}
{% load mytags %}

{% block content %}
<script type="text/javascript">


    function search_host(text){
        $("#asset_group_unperm").children().each(function(){$(this).remove();});
        var permArray = [];
        $("#asset_group_permed").children().each(function(){
                permArray.push($(this).text());
        });
        $("#asset_groups").children().each(function(){
        if ($(this).text().search(text) != -1 && permArray.indexOf($(this).text()) == -1) {
          $("#asset_group_unperm").append($(this).clone())
        }
        });
    }
</script>

    {% include 'nav_cat_bar.html' %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-10">
                <div class="ibox float-e-margins">
                    <!-- title -->
                    <div class="ibox-title">
                        <h5>授权编辑表单 <small>Edit perm of Group</small></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">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <!-- end title -->
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-5 ">
                                <div class="form-group">
                                    <label></label>
                                    <input type="text" id="group_filter" placeholder="Search" class="form-control" value="" oninput="search_host(this.value)">
                                </div>
                            </div>
                            <div class="col-sm-1 ">
                                <div class="form-group">
                                    <label></label>
                                </div>
                            </div>
                            <div class="col-sm-5 ">
                                <div class="form-group">
                                    <label></label>
                                    <input type="text" class="form-control" value="{{ user_group.name }}" readonly>
                                </div>
                            </div>

                        </div>
                        <form method="post"  action="">
                            <input type="text" name="user_group_name" class="form-control" value="{{ user_group.name }}" style="display: none">
                            <div class="row">
                                <div class="col-sm-5"><h4>未授权主机组</h4>
                                    <div>
                                        <select id="asset_groups" name="asset_groups" class="form-control" size="10" multiple style="display: none">
                                            {% for asset_group in asset_groups %}
                                            <option value="{{ asset_group.id }}">{{ asset_group.name }}</option>
                                            {% endfor %}
                                        </select>
                                        <select id="asset_group_unperm" name="asset_group_unperm" class="form-control m-b" size="12" multiple>
                                            {% for asset_group in asset_groups_unperm %}
                                            <option value="{{ asset_group.id }}">{{ asset_group.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>

                                <div class="col-sm-1">
                                    <div class="btn-group" style="margin-top: 50px;">
                                        <button type="button" class="btn btn-white" onclick="move('asset_group_unperm', 'asset_group_permed')"><i class="fa fa-chevron-right"></i></button>
                                        <button type="button" class="btn btn-white" onclick="move('asset_group_permed', 'asset_group_unperm')"><i class="fa fa-chevron-left"></i> </button>
                                    </div>
                                </div>

                                <div class="col-sm-5"><h4>授权主机</h4>
                                    <div>
                                        <select id="asset_group_permed" name="asset_group_permed" class="form-control m-b" size="12"  multiple>
                                          {% for asset_group in asset_groups_permed %}
                                                <option value="{{ asset_group.id }}">{{ asset_group.name  }}</option>
                                          {% endfor %}
                                        </select>
                                    </div>
                                </div>
                             </div>
                            <div class="row">
                                <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-white" type="submit">取消</button>
                                    <button class="btn btn-primary" type="submit" onclick="javascript: (function(){$('#asset_group_permed option').each(function(){$(this).prop('selected', true)})})()">确认保存</button>
                                </div>
                            </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var str = document.location.pathname.split("/")[1];
        var str1 = document.location.pathname.split("/")[2];
        $("#"+str).addClass('active');
        $("#"+str1).addClass('active');
    </script>
{#    <script type="text/javascript">#}
{#        $("#asset_group_permed").children().each(function(){#}
{#          $("#asset_groups").append($(this).clone());#}
{##}
{#          if ($(this).prop("selected") == false) {#}
{#            $("#asset_group_unperm").append(this);#}
{#          }#}
{##}
{#          $("#asset_groups").children().each(function(){$(this).prop("selected", false)});#}
{#        });#}
{#    </script>#}

{% endblock %}