## -*- coding: utf-8 -*-
<%namespace name="base" file="/base/base.html"/>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">${_('User Group: %s') % c.user_group.users_group_name}</h3>
    </div>
    <div class="panel-body">
    ${h.secure_form(url('update_users_group', user_group_id=c.user_group.users_group_id),method='put', id='edit_users_group')}
        <div class="form">
            <!-- fields -->
                <div class="fields">
                     <div class="field">
                        <div class="label">
                            <label for="users_group_name">${_('Group name')}:</label>
                        </div>
                        <div class="input">
                            ${h.text('users_group_name',class_='medium')}
                        </div>
                     </div>

                    <div class="field badged-field">
                        <div class="label">
                            <label for="user">${_('Owner')}:</label>
                        </div>
                        <div class="input">
                            <div class="badge-input-container">
                                <div class="user-badge">
                                    ${base.gravatar_with_user(c.user_group.user.email, show_disabled=not c.user_group.user.active)}
                                </div>
                                <div class="badge-input-wrap">
                                    ${h.text('user', class_="medium", autocomplete="off")}
                                </div>
                            </div>
                            <form:error name="user"/>
                            <p class="help-block">${_('Change owner of this user group.')}</p>
                        </div>
                    </div>

                     <div class="field">
                        <div class="label label-textarea">
                            <label for="user_group_description">${_('Description')}:</label>
                        </div>
                        <div class="textarea textarea-small editor">
                            ${h.textarea('user_group_description',cols=23,rows=5,class_="medium")}
                            <span class="help-block">${_('Short, optional description for this user group.')}</span>
                        </div>
                     </div>
                     <div class="field">
                        <div class="label label-checkbox">
                            <label for="users_group_active">${_('Active')}:</label>
                        </div>
                        <div class="checkboxes">
                            ${h.checkbox('users_group_active',value=True)}
                        </div>
                     </div>
                    <div class="field">
                        <div class="label">
                            <label for="users_group_active">${_('Search')}:</label>
                               ${h.text('from_user_group',
                                        placeholder="user/usergroup",
                                        class_="medium")}
                        </div>
                        <div class="select side-by-side-selector">
                            <div class="left-group">
                                <label class="text"><strong>${_('Chosen group members')}</strong></label>
                                ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,)}
                               <div class="btn" id="remove_all_elements" >
                                   ${_('Remove all elements')}
                                   <i  class="icon-chevron-right"></i>
                               </div>
                            </div>
                            <div class="middle-group">
                                <i  id="add_element" class="icon-chevron-left"></i>
                                <br />
                                <i  id="remove_element" class="icon-chevron-right"></i>
                            </div>
                            <div class="right-group">
                                 <label class="text" >${_('Available users')}
                                 </label>
                                 ${h.select('available_members',[],c.available_members,multiple=True,size=8,)}
                                 <div  class="btn" id="add_all_elements" >
                                     <i  class="icon-chevron-left"></i>${_('Add all elements')}
                                 </div>
                            </div>
                        </div>
                    </div>
                    <div class="buttons">
                      ${h.submit('Save',_('Save'),class_="btn")}
                    </div>
                </div>
        </div>
    ${h.end_form()}
    </div>
</div>
<script>
    $(document).ready(function(){
        MultiSelectWidget('users_group_members','available_members','edit_users_group');

        $("#group_parent_id").select2({
            'containerCssClass': "drop-menu",
            'dropdownCssClass': "drop-menu-dropdown",
            'dropdownAutoWidth': true
        });

        $('#from_user_group').autocomplete({
            serviceUrl: pyroutes.url('user_autocomplete_data'),
            minChars:2,
            maxHeight:400,
            width:300,
            deferRequestBy: 300, //miliseconds
            showNoSuggestionNotice: true,
            params: { user_groups:true },
            formatResult: autocompleteFormatResult,
            lookupFilter: autocompleteFilterResult,
            onSelect: function(element, suggestion){

                function preSelectUserIds(uids) {
                    $('#available_members').val(uids);
                    $('#users_group_members').val(uids);
                }

                if (suggestion.value_type == 'user_group') {
                    $.getJSON(
                        pyroutes.url('edit_user_group_members',
                                    {'user_group_id': suggestion.id}),
                        function(data) {
                            var uids = [];
                            $.each(data.members, function(idx, user) {
                                var userid = user[0],
                                    username = user[1];
                                uids.push(userid.toString());
                            });
                            preSelectUserIds(uids)
                        }
                    );
                } else if (suggestion.value_type == 'user') {
                    preSelectUserIds([suggestion.id.toString()]);
                }
            }
        });
        UsersAutoComplete('user', '${c.rhodecode_user.user_id}');
    })
</script>