{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}Editors
{% endblock %}

{% block css %}
	<!-- Quill css -->
	<link href="/vendor/quill/quill.core.css" rel="stylesheet" type="text/css"/>
	<link href="/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css"/>
	<link href="/vendor/quill/quill.bubble.css" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block pagetitle %}
	{{ include('partials/page-title.html.twig', { sub_title: 'Forms', page_title: 'Editors' }) }}
{% endblock %}

{% block body %}
	<div class="row">
		<div class="col-12">
			<div class="card">
				<ul class="list-group list-group-flush">
					<li class="list-group-item">
						<div class="mb-2">
							<h4 class="header-title mt-2">Quill Editor</h4>
							<p class="text-muted fs-14">Snow is a clean, flat toolbar theme.</p>

							<div id="snow-editor" style="height: 300px;">
								<h3>
									<span class="ql-size-large">Hello World!</span>
								</h3>
								<p><br></p>
								<h3>This is an simple editable area.</h3>
								<p><br></p>
								<ul>
									<li>
										Select a text to reveal the toolbar.
									</li>
									<li>
										Edit rich document on-the-fly, so elastic!
									</li>
								</ul>
								<p><br></p>
								<p>
									End of simple area
								</p>
							</div>
							<!-- end Snow-editor-->
						</div>
					</li>

					<li class="list-group-item">
						<div class="mb-2">
							<h5 class="mb-1">Bubble Editor</h5>
							<p class="text-muted fs-14">Bubble is a simple tooltip based theme.</p>

							<div id="bubble-editor" style="height: 300px;">
								<h3>
									<span class="ql-size-large">Hello World!</span>
								</h3>
								<p><br></p>
								<h3>This is an simple editable area.</h3>
								<p><br></p>
								<ul>
									<li>
										Select a text to reveal the toolbar.
									</li>
									<li>
										Edit rich document on-the-fly, so elastic!
									</li>
								</ul>
								<p><br></p>
								<p>
									End of simple area
								</p>
							</div>
							<!-- end Snow-editor-->

						</div>
					</li>
				</ul>
				<!-- end list-->
			</div>
			<!-- end card-->
		</div>
		<!-- end col-->
	</div>
	<!-- end row -->

{% endblock %}

{% block javascript %}
	<!-- Quill Editor js -->
	<script src="/vendor/quill/quill.min.js"></script>

	<!-- Quill Demo js -->
	<script src="/js/pages/demo.quilljs.js"></script>

	<!-- App js -->
	<script src="/js/app.min.js"></script>
{% endblock %}
