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

{% block body %}
	{{ block('nav', 'internal/libs/nav.html.twig') }}

	<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
		{{ block('topnav', 'internal/libs/top-nav.html.twig') }}

		<section>

			<div class="card card-plain">
				<div class="card-header">
					<h4 class="font-weight-bolder">Add New Document</h4>
					<p class="mb-0"></p>
				</div>
				<div class="card-body">
					<div class="container">
						{{ form_errors(form) }}

						{{ form_start(form) }}
						<div class="row">
							<div class='col'>
								<div class='input-group input-group-outline mb-3'>
									<label for='doc_form_title' class='form-label'>Title</label>
									<input type='text' name='{{ field_name(form.title) }}' id='doc_form_title' class='form-control' required='required'/>
								</div>

								<div class='input-group input-group-outline mb-3'>
                                    {#{{ form_row(form.extras) }}#}
									{% for e in enum('App\\Enums\\DocumentExtras').cases() %}
										<input type='checkbox' name='{{ field_name(form.extras) }}[]' id='{{ e.name }}' value='{{ e.value }}'/>
										<label for='{{ e.name }}' class='extras'>{{ e.name|lower|replace({'_': ' '})|capitalize }}</label>
									{% endfor %}
								</div>

								<div class='input-group input-group-outline mb-3 is-filled'>
									<textarea name='{{ field_name(form.text) }}' id='doc-text' placeholder='Document Text'></textarea>
								</div>
							</div>
						</div>
						<div class='row'>
							<div class="text-center">
								<button type="submit" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Save Document</button>
							</div>
						</div>
						{{ form_end(form) }}
					</div>
				</div>
			</div>
		</section>
	</main>
{% endblock %}

{% block page_js %}
<script src="https://cdn.jsdelivr.net/npm/tinymce@7.6.0/tinymce.min.js"></script>
	<script type='module'>
window.onload = function () {
tinymce.init({
selector: '#doc-text',
height: 500,
width: 1200,
plugins: ['advlist',
'autolink',
'lists',
'link',
'image',
'charmap',
'preview',
'anchor',
'searchreplace',
'visualblocks',
'code',
'fullscreen',
'insertdatetime',
'media',
'table',
'help',
'wordcount'/**/
],
toolbar: 'undo redo | ' +
'blocks | ' +
'bold italic underline forecolor | ' +
'alignleft aligncenter alignright | ' +
'bullist numlist outdent indent | ' +
'removeformat | help',
content_style: '' // 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
}
	</script>
{% endblock %}

{% block page_css %}
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.5/skins/lightgray/content.min.css">
	<style type='text/css'>
		.extras {
			margin: 0 5px !important;
		}
		#doc-text {
			width: 100%;
			height: 300px;
		}
	</style>
{% endblock %}