{! user/util/userchooser !}
{! filemanager/util/browser !}
{! admin/util/emojiarea !}

<div class="editform">

<form method="POST" id="blog-edit-form">

<div class="e-row-variable e-no-padding-left">
	<div class="e-col-25 e-no-padding-left editform-title">
		{% if title == '' %}
			<h2>{"Add Blog Post"}</h2>
		{% else %}
			<h2>{"Edit Blog Post"}</h2>
		{% end %}
	</div>
	<div id="save-buttons" class="e-col-75 e-no-padding editform-buttons">
		<p style="text-align: right">
			<span id="bgsave-status"></span>
			<input type="submit" value="{"Save Blog Post"}" class="autosave-clear" />
			<input type="submit" value="{"Save &amp; Keep Editing"}" id="bgsave" />
			<input type="submit" value="{"Preview"}" onclick="return webpage_preview (this.form)" />
			<a href="/admin/cancel?type=Blog&id={{ id }}&return={{ $_SERVER['HTTP_REFERER']|urlencode }}" onclick="return $.cancel_autosave ('{"Are you sure you want to cancel and lose any changes?"}')">{"Cancel"}</a>
		</p>
	</div>
</div>

<div class="e-row-variable e-no-padding-left">
	<div class="e-col-75 e-no-padding-left editform-main">

<p class="autosave-notice">{"Auto-saved data found for this form."} <a href="#" class="autosave-restore">{"Click here to restore."}</a></p>

<p>{"Title"}<br /><input type="text" name="title" size="65" value="{{ title|quotes }}" />
<span class="notice" id="title-notice">{"You must enter a title."}</span></p>

<p>{"Permalink"} (ex: <tt>/blog/post/{{id}}/<strong>my-post-title</strong></tt>)<br />
<input type="text" name="slug" size="55" value="{{ slug|quotes }}" />
<span class="notice" id="slug-notice"><br />{"Your slug must be a lowercase alphanumeric value."}</span></p>

<p><textarea name="body" id="webpage-body" cols="90" rows="28">{{ body }}</textarea></p>

<div class="meta editform-section">
	<h3 style="margin-bottom: 0">{"Meta"}</h3>

	<div class="e-row e-no-padding">
		<div class="e-col-50 e-no-padding-left">
	<p>{"Description"}<br />
	<textarea name="description" id="description" rows="3">{{ description }}</textarea></p>
		</div>
		<div class="e-col-50 e-no-padding-right">
	<p>{"Keywords"}<br />
	<textarea name="keywords" id="keywords" rows="3">{{ keywords }}</textarea></p>
		</div>
	</div>
</div>

	</div>
	<div class="e-col-25 editform-side">

<div id="thumbnail-div">
	{"Thumbnail"}<br />
	<div class="thumbnail-wrapper">
		<div class="thumbnail" id="thumbnail-preview"
		{% if thumbnail !== '' %}
			style="background-image: url('{{thumbnail}}')"
		{% end %}
		></div>
	</div>
	<input type="hidden" name="thumbnail" id="thumbnail" size="40" value="{{ thumbnail|quotes }}" />
	<input type="submit" id="thumbnail-browse" value="{"Choose"}" />
	<input type="submit" id="thumbnail-clear" value="{"Clear"}" />
</div>

<div class="editform-section info">

<div>
{"Status"}<br />
<p class="toggle" data-field="published">
	<a href="#" data-value="no">{"Draft"}</a
	><a href="#" data-value="yes">{"Published"}</a
	><a href="#" data-value="que">{"Scheduled"}</a>
</p>
<input type="hidden" name="published" id="published" value="{{ published }}" />
</div>

<p>{"Date/Time"}<br /><input type="text" name="ts" id="ts" size="15" value="{{ ts }}" />
<button id="ts-now">{"Now"}</button>
<span class="notice" id="ts-notice">{"You must select a date/time."}</span></p>

<p>{"Author"}<br /><input type="text" name="author" id="author" size="15" value="{{ author|quotes }}" />
<input type="submit" value="{"Choose"}" id="users" />
<span class="notice" id="author-notice">{"You must enter an author."}</span></p>

<p>{"Tags (comma-separated)"}
<ul id="tagit">
{% foreach tag_list %}
	<li>{{ loop_value }}</li>
{% end %}
</ul>
<input type="hidden" name="tags" id="tags"></p>

</div>

{! admin/util/extended?extends=blog\Post&name=Blog+Posts&values=[extra|none]&id=[id]&modal=true !}

	</div>
</div>

</form>

</div>
<div class="clear"></div>

<script>
$(function () {
	$('[name=title], [name=description]').emojioneArea ({
		unicodeAlt: true,
		pickerPosition: 'bottom',
		filtersPosition: 'top'
	});
	
	$('[name=slug]').click (function () {
		if ($(this).val () == '') {
			var text = $('[name=title]').val ();
			text = URLify (text);
			$(this).val (text);
		}
	}).blur (function () {
		var text = $(this).val ();
		text = URLify (text)
		$(this).val (text);
	});

	$('#users').click (function () {
		$.userchooser ({
			set_name_value: '#author'
		});
		return false;
	});
	
	/**
	 * Takes the following HTML and enables a toggle on them:
	 *
	 * <p class="toggle" data-field="published">
	 *     <a href="#" data-value="no">{"Draft"}</a>
	 *     <!-- etc -->
	 * </p>
	 * <input type="hidden" name="published" id="published" value="{{published}}" />
	 */
	$('.toggle').each (function () {
		var $this = $(this),
			field = $this.data ('field'),
			$field = $('#' + field);
		
		$this.find ('a').removeClass ('toggle-active').click (function (e) {
			e.preventDefault ();

			var val = $(this).data ('value');
			$field.val (val);

			$this.find ('a').removeClass ('toggle-active');
			$(this).addClass ('toggle-active');
		});

		$this.find ('a[data-value=' + $field.val () + ']').addClass ('toggle-active');
	});

	{% if Appconf::blog ('Blog', 'post_format') === 'markdown' %}
	$('.CodeMirror').before (
		'<a href="http://daringfireball.net/projects/markdown/basics" target="_blank" id="markdown-link">' + $.i18n ('Markdown formatting') + '</a>'
	);
	{% end %}

	/**
	 * Thumbnail field behaviours.
	 */
	{% if thumbnail == '' %}
		$('#thumbnail-clear').hide ();
	{% end %}

	$('#thumbnail-browse').click (function (e) {
		e.preventDefault ();
		$.filebrowser ({
			allowed: ['jpg', 'jpeg', 'png', 'gif'],
			set_value: '#thumbnail',
			title: "{"Choose an image"}",
			thumbs: true,
			callback: function (file) {
				$('#thumbnail-preview').css ('background-image', 'url(\'' + encodeURI (file) + '\')');
				$('#thumbnail-clear').show ();
			}
		});
	});
	
	$('#thumbnail-clear').click (function (e) {
		e.preventDefault ();
		$('#thumbnail').val ('');
		$('#thumbnail-preview').css ('background-image', 'url(\'/apps/admin/css/default.jpg\')');
		$(e.target).hide ();
	});
	
	$('#ts-now').click (function (e) {
		e.preventDefault ();
		
		var date = new Date (),
			year = date.getFullYear (),
			month = date.getMonth () + 1,
			day = date.getDate (),
			hour = date.getHours (),
			minutes = date.getMinutes (),
			seconds = date.getSeconds (),
			fix = function (num) {
				if (num < 10) {
					num = '0' + num;
				}
				return num
			};
		
		day = fix (day);
		month = fix (month);
		hour = fix (hour);
		minutes = fix (minutes);
		seconds = fix (seconds);
		
		var now = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;

		$('#ts').val (now);

		return false;
	});
});
</script>

<style>
.meta p {
	margin-bottom: 0;
}

.meta h3 {
	padding-left: 7px;
	margin-bottom: 0;
}

#description,
#keywords {
	width: 90%;
	height: 102px !important;
}

#thumbnail-div {
	width: 285px;
	max-width: 285px;
	min-width: 285px;
}

.thumbnail-wrapper {
	margin-bottom: 5px;
	margin-left: 0;
}

#tagit {
	 max-width: 250px;
	 padding-top: 0px;
	 margin-top: -8px;
	 margin-left: 0;
}

.toggle {
	margin-bottom: 1.5em !important;
}
</style>
