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

{% block formsets %}
{% if crops %}
	<div class="crop-info">
		<p>Select a crop from the drop down to begin editing. Make sure you <strong class="color--red">apply crop</strong> after editing and <strong class="color--blue">save</strong> when you're satisfied with all crops.</p>
		<input type="hidden" class="crop-values" name="name" value>
		<input type="hidden" class="crop-values" name="x" value data-property='x'>
		<input type="hidden" class="crop-values" name="x2" value data-property='x2'>
		<input type="hidden" class="crop-values" name="y" value data-property='y'>
		<input type="hidden" class="crop-values" name="y2" value data-property='y2'>
		<ul class="asset__crop-list">
			{% for crop in crops %}
				<li class="row"
						data-name={{crop.name}}
						data-width={{crop.width}}
						data-height={{crop.height}}
						data-x={{crop.x}}
						data-y={{crop.y}}
						data-x2={{crop.x2}}
						data-y2={{crop.y2}}
						{% with crop.name as cropName %}
							{% if cropName %}
								data-crop-preivew={{ obj.file.url }}
							{% endif %}
						{% endwith %}>
					<div class="col">{{ crop.name }}</div>
					<div class="col">{{ crop.width }}x{{ crop.height }} (px)</div>
					<div class="col">
						<a class="button open-popup" href="../crops/{{ crop.name }}/edit/"><i>Edit</i></a>
					</div>
				</li>
			{% endfor %}
		</ul>
	</div>
{% endif %}
{% endblock formsets %}
