{% extends 'layouts/layoutBlox.twig' %}
{% block title %}{{ __('Visual 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 %}
      
		<section id="blox" :class="showEditor">

			<div class="blox-body">
			
				<transition name="fade" v-cloak>
					<div v-if="bloxOverlay" class="blox-overlay"></div>
				</transition>
				
				<div id="initial-content" v-pre>
				
					<div class="blox title">{{title}}</div>
					
					{% for block in content %}
							<div class="blox" >{{block}}</div>
					{% endfor %}

				</div>
				
				<content-block class="title" :body="false">
					<div class="blox title" @click.prevent="setData( $event )" data-id="0" id="blox-0" v-if="title" v-html="title.html"></div>
				</content-block>

				<div id="sortblox" v-cloak>
					<draggable v-model="html" @start="onStart" @end="moveBlock" :disabled="sortdisabled" :animation="150">
						<content-block :body="true" v-for="(block, index) in html" v-if="index !== 0">
							<div v-if="block" class="blox" :key="block.id" @click.prevent="setData( $event )" :data-id="index" :id="'blox-' + index" v-html="block.html"></div>
							<div v-else class="format-bar blox" @click.prevent="clearData( $event )" :data-id="index" :id="'blox-' + index">

								<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" :data-id="index" :id="'blox-' + index" :title="button.title" v-html="button.label"></button>

							</div>
						</content-block>
					</draggable>
				</div>

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

						<div class="format-bar">

							<content-block :body="false">

								<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="button.title|translate" v-html="button.label"></button>
							
							</content-block>

						</div>

				{% endif %}

			</div>
			
		</section>

		{% 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' %}

		<input id="path" type="hidden" value="{{ item.urlRel }}" required readonly />
		{{ csrf_field() | raw }}
		
	</div>
	
{% endblock %}