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

<script type="text/javascript">

	$(document).ready(function () {
		var picture_state = 1;
		var show_picture = '{% trans "choose a profile image" %}';
		var hide_picture = '{% trans "hide" %}';
		var show_img = '<img class="shareicon" title="' + show_picture + '" src="{{LDT_MEDIA_PREFIX}}img/zoom_in.png"/>';
		var hide_img = '<img class="shareicon" title="' + hide_picture + '"src="{{LDT_MEDIA_PREFIX}}img/zoom_out.png"/>';
		
		if ($("#add_contribution").size()) {
			var resize_elem = $("#add_contribution");	
		} else if ($("#add_group").size()){
			var resize_elem = $("#add_group");			
		} else {
			var resize_elem = $("#add_content");
		}
		
		$("#choosepicture").click(function () {
			if (picture_state == 1) {
				$("#choosepicturecontainer").show();
				$(this).html(hide_img + hide_picture);
				picture_state = 2;
			} else {
				$("#choosepicturecontainer").hide();
				$(this).html(show_img + show_picture);
				picture_state = 1;
			}
			
			resize_modal_window(resize_elem);
		});	
		
	});

</script>

<div id="choosepicture" class="clear dropdownlist">
<img class="shareicon" title="{% trans "choose a profile image" %}" src="{{LDT_MEDIA_PREFIX}}img/zoom_in.png"/>
{% trans "choose a profile image" %}
</div>


<table id="choosepicturecontainer" style="display:none;" >
	<tr>
	    <td class="leftcolumn">
	        <strong>{% trans "Current profile picture" %}</strong>
	    </td>
	    <td>
	        {% thumbnail profile_image "x100" format="PNG" as im %}<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />{% empty %}&nbsp;{% endthumbnail %}
	    </td>
	</tr>
    <tr>
        <td class="leftcolumn">
            <label for="id_new_profile_picture">{% trans "Upload a new picture" %}<br/> (JPG, PNG, &lt;&nbsp;1&nbsp;Mo)</label>
        </td>
        <td>
            <input type="file" name="image" id="id_image" accept="image/jpeg, image/png" />
            {% for error in profile_picture_form.image.errors %}
            <span class="error">
                {{ error }}                 
            </span>
            {% endfor %}
        </td>
    </tr>
</table>  
	  