{% load i18n %}
{% load thumbnail %}
{% load static %}
{% load static %}

<script type="text/javascript">

	$(document).ready(function () {
		var icon_size = 16;
		$(".editable").each(function () {
			var src='{% static "ldt/img/pencil.png" %}';
			var img = $('<img src='+src+' id="pencil_img" >');
			var top = $(this).offset().top + $(this).height() - icon_size;
			var left = $(this).offset().left + $(this).width() - icon_size;
			img.css({'position' : 'absolute',
					'top': top,
					'left' : left});
			$(this).after(img);
		});
	});
	
	$(window).resize(function(){
		var icon_size = 16;
		$(".editable").each(function () {
			img=$(this).next();
			var top = $(this).offset().top + $(this).height() - icon_size;
			var left = $(this).offset().left + $(this).width() - icon_size;
			img.css({'position' : 'absolute',
					'top': top,
					'left' : left});
		});	
	});
	
</script>

<div class="projectscontentsheader projectcontentsheadertitle span-12 last" id="contentsheader">
{% trans "Click on the line to see the group's projects" %}
</div>

<input type='hidden' name='id_group' id='id_group' value='' />
<table class="projectscontentstable">
    <tbody class="projectscontentsbody">
	{% for group in groups %}
	<tr class="clickable imageline {% cycle 'projectscontentsoddline' 'projectscontentsevenline' as color_cycle%} update_group_projects" id="{{ group.id }}">
		
		{% if group.change %}
			<td class="groupimg" >
				<a class="grouplink create_group" title="{% trans 'Change this group'%}" href="{% url 'ldt.ldt_utils.views.group.update_group' group_id=group.id %}">
			    {% thumbnail group.profile.image "50x50" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="editable"/>{% empty %}&nbsp;{% endthumbnail %}
	    		</a>
	    	</td>
			<td><b>{{ group.name }}</b></td>
		{% else %}
			<td class="groupimg">
	        {% thumbnail group.profile.image "50x50" crop="center" format="PNG" as im %}<img class="grouplink" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" title="{% trans "You are not allowed to edit this group" %}"/>{% empty %}&nbsp;{% endthumbnail %}
	    	</td>
			<td>{{ group.name }}</td>
		{% endif %}
		
		<td class="align_right"><img src='{% static "ldt/img/control_play.png" %}' class="next_icon"/></td>
		
	</tr>
	{% endfor %}
	
	{% if not user.is_superuser and not search_active %}
	<tr class="clickable imageline {% cycle color_cycle %} update_group_projects" id="-1">  
			<td class="groupimg">
	        {% thumbnail user.image "50x50" crop="center" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}&nbsp;{% endthumbnail %}
	    	</td>
			<td>{% trans "Projects shared with me only" %}</td>
			
			<td class="align_right"><img src='{% static "ldt/img/control_play.png" %}' class="next_icon"/></td>	
	</tr>
	{% endif %}
	
	</tbody>
</table>