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

<script type="text/javascript">

	$(document).ready(function () {
		var icon_size = 16;
		$(".editable").each(function () {
			var img = $('<img src="{{LDT_MEDIA_PREFIX}}img/pencil.png"/>');
			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);
		});
		
	});
</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 %}">
			    {% 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="{{LDT_MEDIA_PREFIX}}/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.get_profile.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="{{LDT_MEDIA_PREFIX}}/img/control_play.png" class="next_icon"/></td>	
	</tr>
	{% endif %}
	
	</tbody>
</table>