{% extends 'base.html' %}                                                                                                                      
{% load i18n %}
{% load static %}

{% block title %}{% trans 'Crop photo' %} - ivatar{% endblock title %}

{% block header %}<link rel="prefetch" href="{% static 'css/jcrop.css' %}">{% endblock header %}

{% block content %}

<h1>{% trans 'Crop photo' %}</h1>

<p>{% trans 'Draw a square around the portion of the image you want to use:' %}</p>

<form action="{% url 'crop_photo' photo.pk %}" method="post">{% csrf_token %}
  {% if email %}<input type="hidden" name="email" value="{{email}}">{% endif %}
  {% if openid %}<input type="hidden" name="openid" value="{{openid}}">{% endif %}

  <p class="aligned wide"><img src='{% url 'raw_image' photo.pk %}' id='cropbox' /></p>
  <input type='hidden' id='x' name='x' value='0'/>
  <input type='hidden' id='y' name='y' value='0'/>
  <input type='hidden' id='w' name='w' value='0'/>
  <input type='hidden' id='h' name='h' value='0'/>

  <p><input type="submit" value="{% trans 'Crop' %}" onsubmit="return checkCoords();"/>
  &nbsp;<a id="cancel-link" href="{% url 'profile' %}">{% trans 'Cancel' %}</a></p>

</form>

{% endblock content %}

{% block bootstrap4_after_content %}
{{ block.super }}
<script src="{% static '/js/jcrop.js' %}"></script>
<script type="text/javascript">
function updateCoords(c) {
    $('#x').val(c.x);
    $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
};
function checkCoords() {
    if (parseInt($('#w').val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
};
</script>
<script type="text/javascript">
    jQuery(function($){
        $('#cropbox').Jcrop({
            onSelect: updateCoords
      });
    });
</script>
{% endblock bootstrap4_after_content %}
