{% load i18n %}

<style type="text/css">
	  select {
	    width: 200px;
	    height: 200px;
	    margin: 5px;
	  }
	  
	  #elemslistcontainer,  #selectedlistcontainer, #selectors {
	  	float: left;
	  }
	  
	  #selectedlistcontainer {
	  	margin-top: 35px;
	  }
	  
	  #selectedlistfooter, #elemslistfooter {
	  	text-align: center;
	  }
	  
	  #selectors {	  
	  	margin-top: 125px;
	  }
	  	   
	</style>
	
	
<script type="text/javascript">
	
	$(document).ready(function() {
		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' %}";

		init_multi_select_events ($("#sharelist"), $("#selectedlist"), $("#read"), $("#write"), "#searchuserinput", search_url);
	});
</script>

<div id="elemslistcontainer">
	<div id="elemslistheader">
		{% trans "User list" %}<br />
		<div class="searchfield rounded span-4"><input type="text" name="search" id="searchuserinput" class="searchfieldinput searchfieldinputbase" value="{% trans 'search' %}"/><img id="projectsajaxloader" class="searchajaxloader" src="{{LDT_MEDIA_PREFIX}}/img/ajax-loader-16x16.gif" alt="loader"/><img id="projecsclear" class="searchclear" src="{{LDT_MEDIA_PREFIX}}img/clear-left.png"/></div>
	</div><br /><br />	
	<select multiple="multiple" id="sharelist">
		{% include "ldt/ldt_utils/partial/sharewith.html" %}
	</select>
	<div id="elemslistfooter">
		<a href="#" id="selectall" title="{% trans "select all users" %}">{% trans "select all" %}</a>
	</div>
</div>

<div id="selectors">
	<a href="#" id="selectelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-right.gif" title="{% trans "select users" %}"></a><br />
	<a href="#" id="removeelems"><img src="{{LDT_MEDIA_PREFIX}}img/to-left.gif" title="{% trans "remove users" %}"></a>
</div>
	
<div id="selectedlistcontainer">
	<div id="selectedlistheader">
		{% trans "Members list" %}
	</div>
	<select multiple="multiple" id="selectedlist" >
		{% for user in member_list %}
			<option value="{{user.type}}-{{ user.id }}" {% if user.change %}style="color: #2181B1;"{% endif %}>{{ user.username }}</option>
		{% endfor %}
	</select>
	<div id="selectedlistfooter" >
		<a href="#" id="removeall" title="{% trans "select all users" %}">{% trans "remove all" %}</a>
		| <a href="#" id="chooseaux" title="{% trans "Decide whether a user user can change this group" %}">{% trans "is admin" %}</a>
		| <a href="#" id="removeaux">{% trans "is not admin" %}</a>
	</div>	
</div>

<div id="read">
</div>

<div id="write">
</div>