{% extends "assets/edit.html" %}
{% load cms %}

{% block content %}

	{% block object_header %}{% endblock %}
	{% block form_title %}{% endblock form_title %}
	<div class="crop-info">
		<h3>Edit Original</h3>

		<form data-form-id="edit" class="jcrop-container" action="" method="post">
			{% csrf_token %}
			<!--//
			<nav>
				<ul class="nav nav-pills">
					<li><a class="button" title="Undo"><i class="icon-step-backward"></i></a></li>
					<li><a class="button" title="Redo"><i class="icon-step-forward"></i></a></li>
					<li><a class="button" title="Reset"><i class="icon-repeat"></i></a></li>
				</ul>
			</nav>
			//-->

			<div class="jcrop">
				<img class="original" src="{{ obj.image.file.url }}" alt="{{ obj.image.title }}" />
				<div class="preview" data-scale-w="{{ obj.get_crop_config.width }}" data-scale-h="{{ obj.get_crop_config.height }}" data-zoom="out">
					<h4>Preview <strong></strong></h4>
					<div class="mask">
						<img class="thumb" src="{{ obj.image.file.url }}" alt="{{ obj.image.title }}" />
					</div>
				</div>
			</div>

			<fieldset>
				<input type="hidden" name="x" id="id_x" value="{{ obj.x }}" data-property="x" />
				<input type="hidden" name="y" id="id_y" value="{{ obj.y }}" data-property="y" />
				<input type="hidden" name="x2" id="id_x2" value="{{ obj.x2 }}" data-property="x2" />
				<input type="hidden" name="y2" id="id_y2" value="{{ obj.y2 }}" data-property="y2" />
				<input type="hidden" name="crop_config" id="id_crop_config" value="{{ obj.get_crop_config }}" />

				<ul class="crop-settings">
					<li>
						<label class="">Width</label>
						<div class="field pixels">
							<input data-property="w" type="text" value="{{ obj.width }}" maxlength="4" />
						</div>
					</li>
					<li>
						<label class="">Height</label>
						<div class="field pixels">
							<input type="text" data-property="h" value="{{ obj.height }}" maxlength="4" />
						</div>
					</li>
					<li>
						<label class="checkbox" for="constrain">
							<small>Lock Aspect Ratio</small>
						</label>
						<div class="field">
							<input type="checkbox" id="constrain"/>
						</div>
					</li>
				</ul>
			</fieldset>

			{% block submit %}
				<p class="submit-row"><a class="button close-popup" href="{{ cancel_url }}">Cancel</a><input class="big close-popup" type="submit" value="Save" /></p>
			{% endblock submit %}
		</form>
	</div>

{% endblock content %}
