{% if isset ($_COOKIE['autosave-' . preg_replace ('/[^a-z0-9-]/', '', $_SERVER['REQUEST_URI'])]) %}
<p class="autosave-notice autosave-add">{"Auto-saved data found."} <a href="#" class="autosave-restore">{"Click to restore."}</a></p>
{% end %}

<form method="POST" id="add-form">
<p id="buttons">
	<span class="notice" id="body-notice">&nbsp; {"You must enter body content."}</span>
	<input type="submit" value="{"Create Stylesheet"}" class="autosave-clear" />&nbsp;
	<a href="javascript:history.go(-1)" onclick="return $.cancel_autosave ('{"Are you sure you want to cancel and lose any changes?"}')">{"Cancel"}</a>
</p>

<p id="name"><strong>{"New Stylesheet Name"}</strong>: <input type="text" name="name" id="name-field" size="30" value="{{ name }}" placeholder="theme/name" /></p>
<span class="notice" id="name-notice1">{"Please enter a name for your stylesheet."}</span>
<span class="notice" id="name-notice2">{"Your name must be alphanumeric and not a duplicate of an existing stylesheet."}</span>

<div class="body">
<textarea name="body" id="code-body" cols="90" rows="28">{{ body }}</textarea>

<div class="preview">{"Preview with layout"}: <select name="layout" id="layout">
{% foreach layouts %}
	<option value="{{ loop_value }}"{% if $data->loop_value == conf('General', 'default_layout') %} selected{% end %}>{{ loop_value }}</option>
{% end %}
</select></div>
<iframe src="/designer/csspreview?layout={{conf('General', 'default_layout')}}" id="preview" frameborder="0" height="300" style="border: 1px solid #ccc"></iframe>
</div>
</form>

<link rel="stylesheet" type="text/css" href="/apps/designer/js/codemirror/lib/codemirror.css" />
<!-- link rel="stylesheet" type="text/css" href="/apps/designer/js/codemirror/theme/default.css" / -->
<script type="text/javascript" src="/apps/designer/js/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="/apps/designer/js/codemirror/mode/css/css.js"></script>

<script type="text/javascript" src="/js/json2.js"></script>
<script type="text/javascript" src="/js/jstorage.js"></script>
<script type="text/javascript" src="/js/jquery.autosave.js"></script>
<script type="text/javascript" src="/js/jquery.verify_values.js"></script>
<script type="text/javascript">
var _codemirror, filemanager_interval, filemanager_last_preview = '';

$(function () {
	_codemirror = CodeMirror.fromTextArea(
		document.getElementById ('code-body'),
		{
			mode: 'text/css',
			theme: 'default',
			indentWithTabs: true,
			lineNumbers: true,
			onFocus: function () {
				try {
					$('form').autosave ();
				} catch (e) {}
			}
		}
	);

	$('#add-form').verify_values ({
		handler: 'designer/addstylesheet',
		callback: function (failed) {
			// highlight the failed elements
			for (var i = 0; i < failed.length; i++) {
				if (failed[i] === 'name') {
					if ($('#' + failed[i] + '-field').val ().length === 0) {
						$.add_notification ($('#' + failed[i] + '-notice1').text ());
					} else {
						$.add_notification ($('#' + failed[i] + '-notice2').text ());
					}
				} else {
					$.add_notification ($('#' + failed[i] + '-notice').text ());
				}
			}
		},
		reset: function (fields) {
			for (var i = 0; i < fields.length; i++) {
				$('#' + fields[i] + '-notice').hide ();
			}
		}
	});
	{% foreach failed %}
	if ('{{ loop_value }}' === 'name') {
		if ($('#{{ loop_value }}-field').val ().length === 0) {
			$.add_notification ($('#{{ loop_value }}-notice1').text ());
		} else {
			$.add_notification ($('#{{ loop_value }}-notice2').text ());
		}
	} else {
		$.add_notification ($('#{{ loop_value }}-notice').text ());
	}
	{% end %}

	// increase editor and preview height if window is tall enough
	$('.CodeMirror').height ($(window).height () / 2 - 60);
	$('#preview').height ($(window).height () / 2 - 80);
	$('html,body').css ({overflow: 'hidden'});

	$('#add-form').autosave ();

	filemanager_last_preview = _codemirror.getValue ();
	filemanager_interval = setInterval (function () {
		var css = _codemirror.getValue (),
			layout = $('#layout').val ();

		if (css != filemanager_last_preview) {
			filemanager_last_preview = layout;
			$.post ('/designer/csspreview', {layout: layout, css: css}, function (res) {
				document.getElementById ('preview').contentDocument.body.innerHTML = res;
			});
		}
	}, 2000);
});
</script>
