{% extends "pxy_dashboard/partials/base.html" %} 
{% load static %} 

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

{% block extra_css %} 

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

{% endblock extra_css %} 


{% block pagetitle %}
{% include "pxy_dashboard/partials/page-title.html" with pagetitle="Forms" title="Editors" %}
{% endblock pagetitle %}

{% block content %} 
<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 content %} 

{% block extra_js %} 

        <!-- Quill Editor js -->
        <script src="{% static 'dashboard/vendor/quill/quill.min.js' %}"></script>

        <!-- Quill Demo js -->
        <script src="{% static 'dashboard/js/pages/demo.quilljs.js' %}"></script>

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

{% endblock extra_js %}

