<link rel="stylesheet" type="text/css" href="public/js/markitup/skins/markitup/style.css" />
<link rel="stylesheet" type="text/css" href="public/js/markitup/sets/texy/style.css" />
<script type="text/javascript" src="public/js/jQuery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="public/js/markitup/jquery.markitup.js"></script>
<script type="text/javascript" src="public/js/markitup/sets/texy/set.js"></script>
<style>
    .markItUp {
        width: 100%;
    }
    .markItUpEditor {
        font: unset;
        font-size: 160%;
        padding: unset;
        width: 100%;
    }
</style>
{ifset $errors}
<div class="ink-alert basic error" role="alert">
  {reset( $errors )[0]}
</div>
{/ifset}
{import forms.html}
<form action="{$action}" method="POST" enctype="multipart/form-data" class="ink-form">
  <div class="column-group horizontal-gutters">
    <div class="xlarge-60 large-60 medium-100 small-100 tiny-100">
      <div class="control-group">
	<label for="page_title">{_'title'}</label>
	<div class="control">
	  {include input, name => 'page[title]', value => ($page->title), maxlength => 100, required => true, autofocus => true}
	</div>
      </div>
      <div class="control-group">
	<label for="page_content">{_'content'}</label>
	<div class="control">
	  {include textarea, name => 'page[content]', required => true, value => ($page->content)}
	</div>
      </div>
    </div>
    <div class="xlarge-40 large-40 medium-100 small-100 tiny-100">
      <fieldset>
	<legend>{_'meta_data'}</legend>
	<div class="control-group{ifset $errors['slug']} validation error{/ifset}">
	  <label for="page_slug">{_'slug'}</label>
	  <div class="control">
	    {include input, name => 'page[slug]', value => ($page->slug), maxlength => 100, placeholder =>('auto_generate_from_title'|translate)}
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_description">{_'description'}</label>
	  <div class="control">
	    {include textarea, name => 'page[description]', value => ($page->description)}
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_language">{_'language'}</label>
	  <div class="control">
	    {include select, name => 'page[language]', value => ($page->language), options => languageNames()}
	  </div>
	</div>
      </fieldset>
      <fieldset>
	<legend>{_'settings'}</legend>
	<div class="control-group">
	  <label for="page_status">{_'status'}</label>
	  {var $statuses = ['draft'|translate, 'published'|translate, 'hidden'|translate]}
	  <div class="control">
	    {include select, name => 'page[status]', value => ($page->status), options => $statuses}
	  </div>
	</div>
	<div class="column-group horizontal-gutters">
	  <div class="control-group all-50">
	    <label for="page_publication_date">{_publication_date}</label>	    
	    <div class="control">
	      {include input, name => 'page[publication_date]', value => ($page->publication_date), 'type' => 'date', required => true}
	    </div>
	  </div>
	  <div class="control-group all-50">
	    <label for="page_publication_time">{_publication_time}</label>
	    <div class="control">
	      {include input, name => 'page[publication_time]', value => (substr( $page->publication_time, 0, 5 )), 'type' => 'time', required => true}
	    </div>
	  </div>
	</div>
	<div class="column-group horizontal-gutters">
	  <div class="control-group all-50">
	    <label for="page_expiration_date">{_expiration_date}</label>  
	    <div class="control">
	      {include input, name => 'page[expiration_date]', value => ($page->expiration_date), 'type' => 'date'}
	    </div>
	  </div>
	  <div class="control-group all-50">
	    <label for="page_expiration_time">{_expiration_time}</label> 
	    <div class="control">
	      {include input, name => 'page[expiration_time]', value => (substr( $page->expiration_time, 0, 5 )), 'type' => 'time'}
	    </div>
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_tagnames">{_'tags'}</label>
	  <div class="control">
	    {include input, name => 'page[tagnames]', value => ($page->tagnames)}
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_template_id">{_'template'}</label>
	  {var $templates = array_column( models\Template::findAll( ['template_id', 'name']), 'name', 'template_id' )}
	  <div class="control">
	    {include select, name => 'page[template_id]', value => ($page->template_id), options => $templates}
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_parent_id">{_'parent'}</label>
	  <div class="control">
	    {include select, name => 'page[parent_id]', value => ($page->parent_id), options => pageTitlesExcept( $page ), prompt => ('none_'|translate)}
	  </div>
	</div>
	<div class="control-group">
	  <label for="page_position">{_'position'}</label>
	  <div class="control">
	    {include input, name => 'page[position]', value => ($page->position), 'type' => 'number', min => 0}
	  </div>
	</div>
      </fieldset>
    </div>
  </div>
  <div class="column-group">
    <div class="all-100">
      {include input, name => 'save', value => ( 'save'|translate ), 'type' => 'submit', class => 'ink-button green'}
      {include input, name => 'continue', value => ( 'save_and_continue'|translate ), 'type' => 'submit', class => 'ink-button green'} {_'or'} <a href="{=BASE_URL}page/list">{('cancel'|translate|lower)}</a>
    </div>
  </div>
</form>
<script language="javascript">
 $(document).ready(function()	{
   $('#page_content').markItUp(myTexySettings);
 });
</script>
