{% extends "omeroadmin/base.html" %}
{% load i18n %}
{% load markup %}
{% load custom_tags %}

{% block title %}{% trans "My account" %}{% endblock %}

{% block jscript %}

    <script type="text/javascript" src="{% url wastatic "javascript/jquery.imgareaselect.js" %}"></script>
    
    {% if edit_mode %}
    <script type="text/javascript">
    function preview(img, selection) { 
    	var scaleX = 100 / (selection.width || 1); 
    	var scaleY = 100 / (selection.height || 1); 

    	$('#thumbnail + div > img').css({ 
    		width: Math.round(scaleX * {{ photo_size.0.0 }}) + 'px', 
    		height: Math.round(scaleY * {{ photo_size.0.1 }}) + 'px',
    		marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px', 
    		marginTop: '-' + Math.round(scaleY * selection.y1) + 'px' 
    	});
    	$('#x1').val(selection.x1);
    	$('#y1').val(selection.y1);
    	$('#x2').val(selection.x2);
    	$('#y2').val(selection.y2);
    	$('#w').val(selection.width);
    	$('#h').val(selection.height);
    } 

    $(document).ready(function () { 
    	$('#save_thumb').click(function() {
    		var x1 = $('#x1').val();
    		var y1 = $('#y1').val();
    		var x2 = $('#x2').val();
    		var y2 = $('#y2').val();
    		var w = $('#w').val();
    		var h = $('#h').val();
    		if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
    			alert("You must make a selection first");
    			return false;
    		}else{
    			return true;
    		}
    	});
    }); 

    $(window).load(function () { 
        var dim = {{ photo_size.0.0 }}/4
        var x1 = {{ photo_size.0.0 }}/2-dim
        var x2 = {{ photo_size.0.0 }}/2+dim
        var y1 = {{ photo_size.0.1 }}/2-dim
        var y2 = {{ photo_size.0.1 }}/2+dim
    	$('#thumbnail').imgAreaSelect({ x1: x1, y1: y1, x2: x2, y2: y2, selectionOpacity: 0.2, aspectRatio: '1:1', handles: true, onSelectChange: preview }); 
    });

    </script>
    {% endif %}
    
{% endblock %}

{% block content %}
<div>
<h1>{% trans "My account" %}</h1>

<p>{% trans "Fields marked with an * are mandatory." %}</p>
<br/>

<div class="myform">
<form action="{% url wamyaccount "save" %}" method="POST">
<table>
  <tbody>
    {% for field in form %}
    <tr><td class="form">{{ field.label_tag }}{% if field.field.required %}*{% endif %}</td><td class="input">{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}{{ field.help_text }}</td></tr>
    {% endfor %}
    {% if ldapAuth %}<tr><td class="form">LDAP: </td><td colspan="2">{{ ldapAuth }}</td></tr>{% endif %}
  </tbody>
  <tr><td>&nbsp;</td><td colspan="2" class="input"><br/><input type="submit" value="{% trans 'Save' %}" /></td></tr>
</table>
</form>
</div>

<div class="photo">
    {% if edit_mode %}
    
	<img src="{% url wamyphoto %}" style="float: left; margin-right: 10px;" id="thumbnail" alt="Create Thumbnail" />
	<div style="border:1px #999999 solid; float:left; position:relative; overflow:hidden; width:100px; height:100px;">
		<img src="{% url wamyphoto %}" style="position: relative;" alt="Thumbnail Preview" />
	</div>
	<div class="clear"> </div>
	<h1><form name="thumbnail" action="{% url wamyaccount "crop" %}" method="post">
		<input type="hidden" name="x1" value="" id="x1" />
		<input type="hidden" name="y1" value="" id="y1" />
		<input type="hidden" name="x2" value="" id="x2" />
		<input type="hidden" name="y2" value="" id="y2" />
		<input type="submit" name="Cancel" value="Cancel" onclick="history.back();return false" />
		<input type="submit" name="upload_thumbnail" value="Crop" id="save_thumb" />
	</form></h1>
	{% else %}
	    <p><center>
		    {% if photo_size %}
		    <img src="{% url wamyphoto %}" width="150" height="150" class="imgzoom"/>
		    <br/>Original size: ({{ photo_size.0.0 }}, {{ photo_size.0.1 }}) {{ photo_size.1|filesizeformat }}
		    <br/><a href="{% url wamyaccount "editphoto" %}">Crop this picture.</a>
    		{% else %}
    		<img src="{% url wamyphoto %}" />
    		<ul class="errorlist"><li>You have not upload photo for your profile yet.</li></ul>
    		{% endif %}
		</center></p>
	{% endif %}

    <h1>Upload your photo</h1>
    <div class="body">
      <p>
        <form enctype="multipart/form-data" method="post" action="{% url wamyaccount "upload" %}">
            <table>
              <tbody>
                {% for field in form_file %}
                <tr><td class="input">{{ field }}</td><td>{% if field.errors %}{{ field.errors }}{% endif %}{{ field.help_text }}</td></tr>
                {% endfor %}
              </tbody>
              <tr><td colspan="2" class="input"><br/><input type="submit" value="{% trans 'Upload' %}" /></td></tr>
            </table>
        </form>
      </p>
    </div>
</div>

</div>
{% endblock %}