{% extends 'layouts/layoutEditor.twig' %}
{% block title %}{{ __('Raw Content Editor') }}{% endblock %}

{% block content %}
	
	<div class="formWrapper">

	  {% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}

		<div id="metanav" class="metanav" v-cloak>
		  
		  <button
		    v-for="tab in tabs"
		    v-bind:key="tab"
		    v-bind:class="['tab-button', { active: currentTab === tab }]"
		    v-on:click="currentTab = tab"
		  >${ tab|translate }</button>

		  <component 
		  	class="tab" 
		  	v-bind:is="currentTabComponent" 
		  	:saved="saved"
		  	:errors="formErrors[currentTab]" 
		  	:schema="formDefinitions[currentTab]"
		  	:formdata="formData[currentTab]"
		  	:item="item"
		  	v-on:saveform="saveForm">
		  </component>

		</div>

      {% endif %}		

		<div id="editor" class="editor" :class="showEditor">

			<form action="#" v-cloak>
			
				<section>
				
					<fieldset>
						<div class="large" :class="{'error' : errors.title}">
							<label for="title">{{ __('Title') }}*</label>
							<input @input="changeContent" id="title" name="title" type="text" v-model="form.title" value="{{title}}" required />
							<span class="error" v-if="errors.title">${ errors.title }</span>
						</div>
						<div class="large" :class="{'error' : errors.content}">
							<label for="content">{{ __('Content') }}*</label>
							<textarea @input="changeContent" v-model="form.content" required></textarea>
							<div id="content" style="display:none" v-pre>{{ content }}</div>
							<span class="error" v-if="errors.content">${ errors.content }</span>
						</div>
						<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
					</fieldset>
					
				</section>
				
			</form>
		</div>
		
		{% if item.elementType == "folder" %}

			<section id="posts" v-if="posts" :class="showPosts">
				<div class="posts formWrapper">
					<input v-model="posttitle" type="text" maxlength="60" name="title" placeholder="add a short title">
					<button type="button" @click.prevent="createPost()" class="post-button">create new post</button>
				</div>
				<div>
					<single-post
					  v-for="post in posts"
					  v-bind:key="post.keyPath"
					  v-bind:post="post"
					></single-post>
				</div>
			</section>

		{% endif %}
		
		{% include 'editor/publish-controller.twig' %}

		{{ csrf_field() | raw }}
		
	</div>
	
{% endblock %}