<div>
<!--
	Wrap everything in a div to convert this file's content in a jquery element
	so it is possible to use $.find.
-->

<script type="text/template" id="selector-tpl">
	<div id="upront-image-placeholder" class="upfront-image-section">
		<div class="upfront-image-selector-container">
			<h2>{{ l10n.drop_images }}</h2>
			or<br>
			<a class="button select-files" href="#">{{ l10n.select_images }}</a>
			<div id="upfront-image-maxsize">{{ l10n.max_upload_size }}</div>
			{{ l10n.or_browse }}
			<div class="upfront-image-media-container">
			<i class="icon-picture"></i> <a class="open-media-gallery" href="#">{{ l10n.media_gallery }}</a>
			</div>
			<span class="dragimagehand"></span>
		</div>
	</div>
</div>
</script>

<script type="text/template" id="progress-tpl">
	<div id="upfront-image-uploading" class="upfront-image-section">
		<h2>{{ l10n.uploading }}</h2>
		<div class="upfront-progress-container">
			<div id="upfront-progress"></div>
		</div>
	</div>
</script>

<script type="text/template" id="editor-tpl">
	<div id="upfront-image-edit" class="upfront-image-section">
		<div id="uimage-canvas-container" style="position:absolute">
			<div id="uimage-canvas" style="position:relative; overflow:hidden;">
				<img class="uimage-img {{ rotation }}" src="{{src}}" style="width:{{size.width}}px; height:{{size.height}}px;position:absolute">
				<div id="uimage-mask" class="image-edit-mask" style="position:absolute; top:{{offset.top}}px; left:{{offset.left}}px"></div>
			</div>
			<div class="image-edit-resize image-edit-control"><i class="icon-resize-full ui-resizable-handle ui-resizable-handle-se"></i></div>
			<div class="image-edit-rotate image-edit-control"><i class="icon-repeat"></i></div>
		</div>
		<div class="image-edit-save-container">
			<div class="no-shadow">
				<a class="image-edit-save" href="#"><i class="icon-ok"></i> {{ l10n.like }}</a>
				<a class="image-edit-change" href="#"><i class="icon-upload-alt "></i> {{ l10n.upload_different }}</a>
			</div>
		</div>
	</div>
</script>


<script type="text/template" id="upload-form-tpl">
<form id="upfront-upload-image" name="upfront-upload-image" enctype="multipart/form-data" method="post" action="{{url}}">
	<input type="file" name="media[]" id="upfront-image-file-input" multiple="multiple">
	<input type="hidden" name="action" value="upfront-media-upload">
	<input type="submit" value="{{ l10n.upload }}">
</form>
</script>

<script type="text/template" id="details-tpl">
<div class="upfront-settings-panel">
	<input type="hidden" id="ugallery-image-id" value="{{id}}">
	<h3>{{ l10n.edit_details }}</h3>
	<div class="upfront-field-wrap">
		<label for="ugallery-image-title">{{ l10n.title }}</label>
		<input type="text" name="ugallery-image-title" value="{{title}}" class="upfront-field-text">
	</div>
	<div class="upfront-field-wrap">
		<label for="ugallery-image-title">{{ l10n.caption }}</label>
		<input type="text" name="ugallery-image-caption" value="{{caption}}" class="upfront-field-text">
	</div>
	<div class="upfront-field-wrap">
		<label for="ugallery-image-title">{{ l10n.alt }}</label>
		<input type="text" name="ugallery-image-alt" value="{{alt}}" class="upfront-field-text">
	</div>
	<div class="upfront-settings-button_panel">
		<button type="button" class="upfront-save_settings"><i class="icon-ok"></i> {{ l10n.ok }}</button>
	</div>

	<div class="upfront-field-wrap upfront-additive_multiselection upfront-media-controls ">
		<label for="ugallery-image-labels">{{ l10n.labels }}</label>
		<div class="existing_labels">
		<a href="#remove" class="upfront-icon upfront-icon-media-label-delete" data-idx="2">{{ l10n.wtf }}</a>
		</div>
		<div class="label_selector">
			<input type="text" name="ugallery-image-labels" placeholder="{{ l10n.add_new_label }}" class="upfront-field-text">
			<div class="labels_list">
			</div>
		</div>
	</div>

</div>
</script>

</div>
