{% set itemurl = (item.urlRelWoF == '/') ? '' : item.urlRelWoF %}

<div class="editor buttonset" id="publishController" data-published="{{ item.published }}" data-drafted="{{ item.drafted }}" v-cloak>
	<div v-if="errors.message" class="message error">${ errors.message }</div>
	{% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}
		<button v-if="raw" @click.prevent="saveDraft" id="draft" :class="draftResult" :disabled="draftDisabled"><span class="desktop">{{ __('Save') }}&nbsp;</span>{{ __('Draft') }}</button>
	{% endif %}
	{% if (acl.isAllowed(get_role(), 'content', 'publish')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'publish')) ) %}
		<button @click.prevent="publishDraft" id="publish" :class="publishResult" :disabled="publishDisabled">{{ __('Publish') }}</button>
	{% endif %}
	{% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}
		<button @click.prevent="showModal('discard')" v-if="visual && !publishStatus" id="discard" :class="discardResult" :disabled="publishDisabled">{{ __('Discard') }}</button>
	{% endif %}
	<div class="secondary">
		{% if (acl.isAllowed(get_role(), 'content', 'unpublish')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'unpublish')) ) %}
			<button @click.prevent="depublishArticle" class="button--secondary" :disabled="publishStatus"><span class="desktop">${publishLabel}</span><span class="mobile">${publishLabelMobile}</span></button>
		{% endif %}
		{% if (acl.isAllowed(get_role(), 'content', 'delete')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'delete')) ) %}
			<button @click.prevent="showModal('delete')" class="button--secondary danger"><span class="desktop">{{ __('delete') }}</span><span class="mobile">X</span></button>
		{% endif %}
		{% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}
			<a v-if="visual" href="{{ base_url }}/tm/content/raw{{ itemurl }}" class="button--secondary"><span class="desktop">{{ __('raw mode') }}</span><span class="mobile">{{ __('raw') }}</span></a>
			<a v-if="raw" @click="checkUnsafedContent(event)" href="{{ base_url }}/tm/content/visual{{ itemurl }}" class="button--secondary"><span class="desktop">{{ __('visual mode') }}</span><span class="mobile">{{ __('visual') }}</span></a>
		{% endif %}
		<a target="_blank" class="button--secondary" href="{{ item.urlAbs }}"><svg class="icon baseline icon-external-link"><use xlink:href="#icon-external-link"></use></svg></a>
	</div>
	<transition name="fade">
		<div v-if="modalWindow" id="modalWindow" class="modalWindow">
			<div class="modalInner">
				<div @click="hideModal" id="closeModal" class="closeModal">X</div>
				{% if (acl.isAllowed(get_role(), 'content', 'delete')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'delete')) ) %}
					<div v-if="modalType == 'delete'">
						<h2>{{ __('Delete page') }}</h2>
						<p>{{ __('Do you really want to delete this page') }} {{ __('Please confirm') }}</p>
						<button @click.prevent="deleteArticle" class="large alert" :class="deleteResult" :disabled="deleteDisabled">{{ __('Delete Page') }}</button>
					</div>
				{% endif %}
				{% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}
					<div v-if="modalType == 'discard'">
						<h2>{{ __('Discard Changes') }}</h2>
						<p>{{ __('Do you want to discard your changes and set the content back to the live version') }}</p>
						<button @click.prevent="discardDraft" class="large fullwidth" :class="discardResult" :disabled="publishDisabled">{{ __('Discard Changes') }}</button>
					</div>
				{% endif %}
				{% if (acl.isAllowed(get_role(), 'content', 'update')) or ( (mycontent) and (acl.isAllowed(get_role(), 'mycontent', 'update')) ) %}
					<div v-if="modalType == 'unsafed'">
						<h2>{{ __('Save Your Changes') }}</h2>
						<p>{{ __('You have unsaved changes. Go back and save your changes. If you proceed to the visual mode now, then you will loose your changes.') }}</p>
						<button @click="hideModal" class="large fullwidth">{{ __('Go back and save') }}</button>
						<a class="w-100 tc ma2 tm-red hover-bg-tm-red hover-white" href="{{ base_url }}/tm/content/visual{{ itemurl }}">{{ __('go to visual mode') }}</a>
					</div>
				{% endif %}
			</div>
		</div>
	</transition>
</div>