</%def>

<%def name="page_nav()">

    ${self.menu('admin')}

</%def>

<%def name="main()">

<div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}       

    </div>

    <!-- end box / title -->

    ${h.form(url('users_group', id=c.users_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_='small')}

	                </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">${_('Members')}:</label>

                    </div>

                    <div class="select">

	                    <table> 

	                            <tr>

	                                <td>

	                                    <div>

	                                        <div style="float:left">

	                                            <div class="text" style="padding: 0px 0px 6px;">${_('Choosen group members')}</div>

	                                            ${h.select('users_group_members',[x[0] for x in c.group_members],c.group_members,multiple=True,size=8,style="min-width:210px")}

	                                           <div  id="remove_all_elements" style="cursor:pointer;text-align:center">

	                                               ${_('Remove all elements')}

	                                           </div>

	                                        </div>

	                                        <div style="float:left;width:20px;padding-top:50px">

	                                            <img alt="add" id="add_element" 

	                                                style="padding:2px;cursor:pointer" 

	                                            <br />

	                                            <img alt="remove" id="remove_element" 

	                                                style="padding:2px;cursor:pointer" 

	                                        </div>

	                                        <div style="float:left">

	                                             <div class="text" style="padding: 0px 0px 6px;">${_('Available members')}</div>

	                                             ${h.select('available_members',[],c.available_members,multiple=True,size=8,style="min-width:210px")}

	                                             <div id="add_all_elements" style="cursor:pointer;text-align:center">

	                                                    ${_('Add all elements')}

	                                             </div>	                                        

	                                        </div>

	                                    </div>

	                                </td>           

	                            </tr>       

	                    </table>                    

                    </div>	            

                </div>			        

                <div class="buttons">

                  ${h.submit('save','save',class_="ui-button")}

                </div>             

            </div>          

    </div>        

${h.end_form()}        

</div>

<script type="text/javascript">

    YAHOO.util.Event.onDOMReady(function(){

            var D = YAHOO.util.Dom;

            var E = YAHOO.util.Event;

            //definition of containers ID's

            var available_container = 'available_members';

            var selected_container = 'users_group_members';

            //form containing containers id

            var form_id = 'edit_users_group';

            //temp container for selected storage.

            var cache = new Array();

            var c =  D.get(selected_container);

            //get only selected options for further fullfilment

            for(var i = 0;node =c.options[i];i++){

                if(node.selected){

                    //push selected to my temp storage left overs :)

                    cache.push(node);

                }   

            }

            //clear 'selected' select

            c.options.length = 0;

            //fill it with remembered options

            for(var i = 0;node = cache[i];i++){

                c.options[i]=new Option(node.text, node.value, false, false);

            }