{% load omblog_tags %}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>
			{% block title %}{{post.title}}{% endblock %}
		</title>
		<link rel="shortcut icon" href="{{STATIC_URL}}omblog/favicon.ico">
		<link
			rel="stylesheet"
			href="{{STATIC_URL}}omblog/css/omblog.edit.css"
			media="screen"
			type="text/css">
		<link
			href="https://fonts.googleapis.com/css?family=Lato:400,900"
			rel="stylesheet"
			type="text/css">
	</head>
	<body data-post-pk="{{post.pk}}">
		<a
			class="view"
			data-base-url="{% url 'omblog:index' %}"
			data-slug="{{post.slug}}" 
			href="{{post.get_absolute_url}}">
			view
		</a>
		<div id="dropbox">
			<div id="dropbox-target"> </div>
			<div class="instructions">
				Drag images into this
				box to upload. 
			</div>
			<div class="progress">
				<div class="completed"></div>
			</div>
		</div>
		<div id="images">
			{% for img in post.postimage_set.all %}
			<div>
				<div
					draggable="true"
					class="postimage"
					style="background-image: url({{img.thumb}})"
					data-pk="{{img.pk}}"
					data-markdown="'![{{img.title}}]({{img.large}})"
					ondragstart="event.dataTransfer.setData(
						'text/plain',
						'![{{img.title}}]({{img.large}})');
					event.dataTransfer.setData('pk', {{img.pk}});" >
				</div>
			</div>
			{% endfor %}
		</div>
		<div class="feedback">
			<p>
				<span class="icon rotate"></span>
				<span class="msg">Saving</span>
			</p>
		</div>
		<div class="write">
			<form method="post">
				<fieldset>
					{% csrf_token %}
					{{form.title}}
				</fieldset>
				<fieldset>
					{{form.description}}
				</fieldset>
				<fieldset>
					{{form.source_content}}
				</fieldset>
				<fieldset class="toggle">
					<label for="id_status">
					status
					</label>
					{{form.status}}
					<br>
					<label for="id_slug">
						URL
						<span class="blog_url"><span>
					</label>
					{{form.slug}}
				</fieldset>
			</form>
		</div>
<script src="{{STATIC_URL}}omblog/js/jquery-2.0.3.min.js"></script>
<script src="{{STATIC_URL}}omblog/js/jquery.slugify.js"></script>
<script src="{{STATIC_URL}}omblog/js/mousetrap.min.js"></script>
<script src="{{STATIC_URL}}omblog/js/ICanHaz.js"></script>
<script src="{{STATIC_URL}}omblog/js/jquery.autosize.min.js"></script>
<script src="{{STATIC_URL}}omblog/js/omblog.edit.js"></script>
<script>
	$(function(){
		$('#id_title').autosize();
		$('#id_description').autosize();
		$('#id_source_content').autosize();
	});
	window.omblog_url = '{% url 'omblog:index' %}';
	window.attach_create_url = window.omblog_url + 'attach/';
	window.attach_delete_url = window.attach_create_url + 'delete/';
</script>
{% verbatim %}
<script type="text/html" id="postimage">
<div>
	<div
		draggable="true"
		style="background-image: url({{thumb}})"
		class="postimage"
		data-pk="{{pk}}"
		data-markdown="'![{{title}}]({{large}})"
		ondragstart="event.dataTransfer.setData('text/plain',
			'![{{title}}]({{large}})');
			event.dataTransfer.setData('pk', {{pk}})">
	</div>
</div>
</script>
{% endverbatim %}
	</body>
</html>
