{% extends 'layouts/layoutSystem.twig' %}
{% block title %}{{ translate('System Settings') }}{% endblock %}

{% block content %}

	<div class="flex justify-between items-center mb-4">
		<h1 class="flex items-center text-3xl font-bold">{{ translate('System') }}
			{% if jsdata.aiconfigured %}
				<span class="pl-4 text-lg">
					<a href="javascript:void(0)" onclick="eventBus.$emit('startHelp')" class="text-stone-400 hover:text-teal-600 transition duration-100">
						<svg class="icon icon-question"><use xlink:href="#icon-question"></use></svg>
					</a>
				</span>	
			{% endif %}
		</h1>
		<a href="https://typemill.net/typemill/roadmap" target="_blank" class="inline-block px-2 py-1 text-xs font-medium bg-stone-200 text-stone-700 rounded hover:bg-stone-300 dark:bg-stone-600 dark:text-stone-200 dark:hover:bg-stone-500 transition duration-100">
			v{{ settings.version }}
		</a>
	</div>
	
	<div id="system" v-cloak></div>

{% endblock %}

{% block javascript %}

	<script src="{{ base_url() }}/system/typemill/author/js/highlight.min.js?v={{ settings.version }}"></script>
	<script src="{{ base_url() }}/system/typemill/author/js/vue-system.js?v={{ settings.version }}"></script>
	<script src="{{ base_url() }}/system/typemill/author/js/vue-forms.js?v={{ settings.version }}"></script>
	<script>
		app.config.globalProperties.$filters = translatefilter;
		app.mount('#system');
	</script>

{% endblock %}
