{% extends "themes/"|add:settings.page_theme|add:"/base.html" %}
{% load static %}
{% load i18n %}
{% load l10n %}

{% block head_extensions %}
	{% if enable_tag_area_selection %}
    <link rel="stylesheet" type="text/css" href="{% static 'pygal/js/imgareaselect-js/css/imgareaselect-default.css' %}" />
	<script src="{% static 'pygal/js/jquery.min.js' %}"></script>
    <script src="{% static 'pygal/js/imgareaselect-js/jquery.imgareaselect.pack.js' %}"></script>
    <script>
      function preview(img, selection) {}
        $(function () {
          $('#tag_img').imgAreaSelect({
		{% if form.has_valid_coordinates %}
	            x1: {% widthratio form.value_tl_x factor_to_original 1 %},
	            y1: {% widthratio form.value_tl_y factor_to_original 1 %},
	            x2: {% widthratio form.value_br_x factor_to_original 1 %},
	            y2: {% widthratio form.value_br_y factor_to_original 1 %},
		{% endif %}
        	  onSelectEnd: function (img, selection) {
            $('input[name="topleft_x"]').val(Math.round(selection.x1 * {{ factor_to_original|unlocalize }}));
            $('input[name="topleft_y"]').val(Math.round(selection.y1 * {{ factor_to_original|unlocalize }}));
            $('input[name="bottomright_x"]').val(Math.round(selection.x2 * {{ factor_to_original|unlocalize }}));
            $('input[name="bottomright_y"]').val(Math.round(selection.y2 * {{ factor_to_original|unlocalize }}));
          }
        });
      });
    </script>
	{% endif %}
{% endblock head_extensions %}


{% block content %}
	<form class="form" method="post">
		{% csrf_token %}
		<input type="hidden" name="next" id="id_next" value="{{ next }}">
		{{ form.as_p }}
		{% if enable_tag_area_selection %}
        <p><img id="tag_img" width="{{ tag_img_width }}" height="{{ tag_img_height }}" src="{{ item.url_webnail }}" alt="{{ item.name }}"></p>
			{% if form.has_valid_coordinates %}
		<input type="hidden" name="topleft_x" id="id_topleft_x" value="{{ form.value_tl_x }}">
		<input type="hidden" name="topleft_y" id="id_topleft_y" value="{{ form.value_tl_y }}">
		<input type="hidden" name="bottomright_x" id="id_bottomright_x" value="{{ form.value_br_x }}">
		<input type="hidden" name="bottomright_y" id="id_bottomright_y" value="{{ form.value_br_y }}">
			{% else %}
		<input type="hidden" name="topleft_x" id="id_topleft_x">
		<input type="hidden" name="topleft_y" id="id_topleft_y">
		<input type="hidden" name="bottomright_x" id="id_bottomright_x">
		<input type="hidden" name="bottomright_y" id="id_bottomright_y">
			{% endif %}
		{% endif %}
		<input type="submit" name="save" value="{% trans 'Save' %}" class="button" />
		{% if enable_delete_button %}
		<input type="submit" name="delete" value="{% trans 'Delete' %}" class="button" />
		{% endif %}
	</form>
{% endblock content %}
