<!-- @formatter:off -->
{% block froala_widget %}

	{# CSS. #}
	{% if includeFontAwesome %}
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" />
	{% endif %}

	{% if includeCodeMirror %}
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.css" />
	{% endif %}

	{% if includeCSS %}
		<link rel="stylesheet" type="text/css" href="{{ asset( basePath ~ 'css/froala_editor.pkgd.min.css' ) }}" />
		<link rel="stylesheet" type="text/css" href="{{ asset( basePath ~ 'css/froala_style.min.css' ) }}" />

		{% if arrOption[ "theme" ] is defined %}
			<link rel="stylesheet" type="text/css" href="{{ asset( basePath ~ 'css/themes/' ~ arrOption[ "theme" ] ~ '.min.css' ) }}" />
		{% endif %}

		{% for plugin in arrPluginCSS %}
			<link rel="stylesheet" type="text/css" href="{{ asset( basePath ~ 'css/' ~ plugin ~ '.min.css' ) }}" />
		{% endfor %}

	{% endif %}

	{# Editor textarea. #}
	<textarea {{ block( "widget_attributes" ) }}>{{ value }}</textarea>

	{# JS. #}
	{% if includeJQuery %}
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	{% endif %}

	{% if includeCodeMirror %}
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/codemirror.min.js"></script>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.3.0/mode/xml/xml.min.js"></script>
	{% endif %}

	{% if includeJS %}
		<script type="text/javascript"  src="{{ asset( "bundles/kmsfroalaeditor/misc.js" ) }}"></script>
		<script type="text/javascript"  src="{{ asset( basePath ~ 'js/froala_editor.pkgd.min.js' ) }}"></script>

		<!--[if lt IE 9]>
		<script type="text/javascript" src="{{ asset( basePath ~ 'js/froala_editor_ie8.min.js' ) }}"></script>
		<![endif]-->
		<script type="text/javascript" src="{{ asset( basePath ~ 'js/languages/' ~ arrOption.language ~ '.js' ) }}"></script>

		{% for plugin in arrPluginJS %}
			<script type="text/javascript" src="{{ asset( basePath ~ 'js/' ~ plugin ~ '.min.js' ) }}"></script>
		{% endfor %}
	{% endif %}

	{% if customJS is defined %}
		<script type="text/javascript"  src="{{ asset( customJS ) }}"></script>
	{% endif %}

	{# Load the editor. #}
	<script type="text/javascript">

		{# Go. #}
		$( document ).ready( function () { $( "#{{ id }}" ).froalaEditor({
			{# Add license. #}
			{% if serialNumber is defined %}
				key : "{{ serialNumber }}",
			{% endif %}
			{% for option, value in arrOption %}
				{{ option }} : {% include "@KMSFroalaEditor/Form/value.html.twig" %}
			{% endfor %} })
			.on( "froalaEditor.image.error", function ( e, editor, error )
			{
				froalaDisplayError(  editor, error );
			} )
			.on( "froalaEditor.imageManager.error", function ( e, editor, error )
			{
				froalaDisplayError(  editor, error );
			} )
			.on( "froalaEditor.save.error", function ( e, editor, error )
			{
				froalaDisplayError(  editor, error );
			} )
			.on( "froalaEditor.file.error", function ( e, editor, error, responses )
			{
				froalaDisplayError(  editor, error );
			} )
			.on( "froalaEditor.video.error", function ( e, editor, error, responses )
			{
				froalaDisplayError(  editor, error );
			} )
			{% for event, func in events %}
				.on("{{ event }}", {{ func }})
            {% endfor %}
			;
		});
	</script>

{% endblock %}