{! admin/util/emojiarea !}
{! admin/util/twemoji !}

<div class="form">

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

<form method="POST" id="admin-add-form">
<p>{"Page title"}:<br /><input type="text" name="title" size="50" value="{{ title }}" onblur="webpage_add_title_to_id (this.form)" />
<span class="notice" id="title-notice">{"You must enter a page title."}</span></p>
<p>{"Page ID"} (ex: <tt>{{ Appconf::admin ('Site Settings', 'site_domain') }}/<strong>your-page-id</strong></tt>):<br /><input type="text" name="id" size="35" value="{{ id }}" onblur="this.value = this.value.toLowerCase ()" />
<span class="notice" id="id-notice">{"Your ID must be a lowercase alphanumeric value and can't already exist. It must also not share the name of an app."}</span></p>
<p>{"Body"}: <span class="notice" id="body-notice">{"You must enter body content."}</span><br />
<textarea name="body" id="webpage-body" cols="90" rows="28">{{ body }}</textarea></p>

<h4>{"Extra Options"}</h4>

<p>{"Page layout"}:<br />
<select name="layout">
{% foreach admin\Layout::options() as _layout, _name %}
	<option value="{{ _layout }}"{% if _layout == $data->layout %} selected{% end %}>{{ _name }}</option>
{% end %}
</select></p>
<p>{"Access"}:<br />
<select name="access">
{% foreach User::access_list () %}
	<option value="{{ loop_index }}"{% if access === $data->loop_index %} selected{% end %}>{{ loop_value }}</option>
{% end %}
</select></p>
<p>{"Alternate menu title"}:<br /><input type="text" name="menu_title" size="40" value="{{ menu_title }}" /></p>
<p>{"Alternate window title"}:<br /><input type="text" name="window_title" size="40" value="{{ window_title }}" /></p>
<span class="notice" id="layout-notice">{"The layout you entered doesn't exist."}</span></p>
<p>{"Description"}:<br /><textarea name="description" cols="60" rows="4">{{ description }}</textarea></p>
<p>{"Keywords (comma-separated)"}:<br /><textarea name="keywords" cols="60" rows="4">{{ keywords }}</textarea></p>

{! admin/util/extended?extends=Webpage&name=Pages !}

<p>
	<input type="submit" value="{"Add Page"}" class="autosave-clear" />&nbsp;
	<input type="submit" value="{"Preview"}" onclick="return webpage_preview (this.form)" />&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>
</form>

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

<script>
$(function () {
	twemoji.parse (document.querySelector ('#title h2'));
	
	$('[name=title], [name=description]').emojioneArea ({
		unicodeAlt: true,
		pickerPosition: 'bottom',
		filtersPosition: 'top'
	});
});
</script>