{% extends 'base.html.twig' %}

{% block title %}Create Message{% endblock %}

{% block content %}
	<div class="kt-subheader kt-grid__item"></div>

	{{ form_start(form, { 'attr': { 'class': 'kt-form','autocomplete':'off' }}) }}
		<div class="kt-container kt-grid__item kt-grid__item--fluid">
			<div class="kt-portlet kt-portlet--mobile">
				<div class="kt-portlet__head kt-portlet__head--lg">
					<div class="kt-portlet__head-label">
						<h3 class="kt-portlet__head-title">Create Message</h3>
					</div>

					<div class="kt-portlet__head-toolbar">
						<div class="kt-portlet__head-wrapper">
							<a href="{{ path('message_index') }}" class="btn btn-clean btn-icon-sm mr-2"><i class="la la-long-arrow-left"></i>Back</a>
							<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
							<button class="btn btn-primary btn-bold">Submit</button>
						</div>
					</div>
				</div>

				<div class="kt-portlet__body">
					<div class="form-group row">
						{{ form_label(form.role, '', {'label_attr': { 'class': 'col-1 col-form-label font-weight-bold' }}) }}

						<div class="col-lg-6 col-xl-4">
							{{ form_widget(form.role, {'attr': { 'class': 'form-control select-picker' }}) }}
							{{ form_errors(form.role) }}
						</div>
					</div>

					<div class="form-group row">
						{{ form_label(form.subject, '', {'label_attr': { 'class': 'col-1 col-form-label font-weight-bold' }}) }}

						<div class="col-lg-8 col-xl-6">
							{{ form_widget(form.subject, {'attr': { 'class': 'form-control', 'maxlength':'100','onkeydown':"return /[0-9a-zA-Z ]/i.test(event.key)"}}) }}
							{{ form_errors(form.subject) }}
						</div>
					</div>

					<div class="form-group row">
						{{ form_label(form.body, '', {'label_attr': { 'class': 'col-1 col-form-label font-weight-bold' }}) }}

						<div class="col-lg-10 col-xl-8">
							{{ form_widget(form.body, {'attr': { 'class': 'form-control','maxlength':'255' }}) }}
							{{ form_errors(form.body) }}
						</div>
					</div>
				</div>
			</div>
		</div>
	{{ form_end(form) }}
{% endblock %}

{% block scripts %}
	{{ parent() }}

	<script src="{{ asset('assets/plugins/custom/tinymce/tinymce.bundle.js') }}"></script>

	<script>
		$('.select-picker').selectpicker();

		tinymce.init({
			selector: '#message_body',
			menubar: false,
			toolbar: [
				'styleselect fontselect fontsizeselect',
				'undo redo | cut copy paste | bold italic | link image | alignleft aligncenter alignright alignjustify',
				'bullist numlist | outdent indent | blockquote subscript superscript | advlist | autolink | lists charmap | print preview |  code'
			],
			plugins: 'advlist autolink link image lists charmap print preview code',
			setup: function(editor) {
        editor.on('change', function(e) {
          editor.save();
        });
    	}
		});
	</script>
{% endblock %}