{% load i18n %}

<style type="text/css">
	#elemslistcontainer, #selectors {
		float: left;
	}
	
    #sharelist, #selectedlist {
    	width: 250px;
    	height: 200px;
  	}
  
  	#selectedlistfooter, #elemslistfooter {
	  	text-align: center;
  	}
  	
  	#selectedlistcontainer {
  		padding-top: 35px;
  	}
  	  
  	#selectors {	  
	  	margin-top: 125px;	  	
    	padding-left: 45px;
    	padding-right: 45px;
  	}	  	  
  	
  	#elemslistheader input {
  		background-color: white;
  		width: 100px;
  	}
</style>	
	
<script type="text/javascript">
	
	$(document).ready(function() {
		var search_url = "{% url ldt.ldt_utils.views.share_filter filter='__FILTER__' use_groups='true' %}";

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

<div id="permissioncontainer" class="append-bottom clear">
	<div id="elemslistcontainer" clas="span-9">
		<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" class="span-9 last">
		<div id="selectedlistheader" >
			{% trans "Members list" %}
		</div>
		<select multiple="multiple" id="selectedlist" >
			{% for elem in member_list %}
				<option value="{{elem.type}}-{{ elem.id }}" {% if elem.change %}style="color: #2181B1;"{% endif %}>{{ elem.name }}</option>
			{% endfor %}
		</select>
		<div id="selectedlistfooter" class="span-6" >
			<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">
	{% for elem in member_list %}
		<input type="hidden" value="{{ elem.type }}-{{ elem.id }} name="read_list"/>
	{% endfor %}
	</div>
	
	<div id="write">
	</div>
</div>  
