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

{% block content %}

	{% block object_header %}{% endblock %}
	{% block form_title %}{% endblock form_title %}
	<div class="image-cropper">
		<h2>Edit Original</h2>

		<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="image-cropper__container">
  				<img class="image-cropper__original" src="{{ obj.image.file.url }}" alt="{{ obj.image.title }}" />
        </div>
				<!-- <div class="image-cropper__preview" data-scale-w="{{ obj.get_crop_config.width }}" data-scale-h="{{ obj.get_crop_config.height }}" data-zoom="out">
					<h3>Preview <strong></strong></h3>
						<img src="{{ obj.image.file.url }}" alt="{{ obj.image.title }}" /> -->
				</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="image-cropper__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 %}
        <div class="button-group button-group--submit">
            <a class="button button--secondary close-popup" href="{{ cancel_url }} ">Cancel</a>
            <input class="button button--primary" type="submit" value="Save" />
        </div>
			{% endblock submit %}
		</form>
	</div>

{% endblock content %}
