{% extends "account/partial/layout_logged_in.html.twig" %}

{% block title %}{{ t("account_edit_page_name", "Account Details") }}{% endblock %}
{% block description %}{{ t("account_edit_meta_description", "Account details") }}{% endblock %}
{% block keywords %}{{ t("account_edit_meta_keywords", "details, account, short, url, user") }}{% endblock %}
{% block selected_navigation_link %}settings{% endblock %}


{% block body %}
<style>
.ql-editor {
    height: 300px !important;
  }
  .button-div{
    margin-top: 10px;
    text-align: center;
}
</style>
    <div class="main-content layer base-slide">
        <ol class="breadcrumb bc-3">
            <li>
                <a href="{{ theme.getAccountWebRoot() }}"><i class="entypo-home"></i>{{ t("home", "Home") }}</a>
            </li>
            <li class="active">
                <strong>Composition of Iqac</strong>
            </li>
        </ol>
        <div id="editor"></div>
        <div class="button-div mt-2">
            <button id="getDataButton" class="btn btn-green">Submit</button>
        </div>
    </div>
    <script type="text/javascript" src="{{ theme.getAccountJsPath() }}/evolution-api.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="https://unpkg.com/quill-html-edit-button@2.2.7/dist/quill.htmlEditButton.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/highlight.min.js"></script>
    <script charset="UTF-8" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.2/languages/xml.min.js"></script>
    <script>

            currentAlbumId = 'composition';
        $(document).ready(function(){
            Quill.register("modules/htmlEditButton", htmlEditButton);
            var quill;
            $.ajax({
                type: "GET",
                url: ACCOUNT_WEB_ROOT + "/ajax/get-composition-iqac",
                data: {},
                success: function (response) {
                    var compositionData = response.composition;
                    if(compositionData){
                        quill = new Quill('#editor', {
                            modules: {
                            toolbar: [
                                [{ 'header': [1, 2, 3, false] }],
                                ['bold', 'italic', 'underline', 'strike'],
                                ['link', 'image', 'video'],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                [{ 'indent': '-1'}, { 'indent': '+1' }],
                                [{ 'align': [] }],
                                [{ 'color': [] }],
                                ['clean']
                            ],
                            htmlEditButton: {
                                debug: false, // logging, default:false
                                msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
                                okText: "Ok", // Text to display in the OK button, default: Ok,
                                cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
                                buttonHTML: "&lt;&gt;", // Text to display in the toolbar button, default: <>
                                buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
                                syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
                                prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
                                editorModules: {} // The default mod
                            }
                            },
                            theme: 'snow'  // Specify theme (snow or bubble)
                        });
                        quill.root.innerHTML = compositionData;
                    }else{
                        quill = new Quill('#editor', {
                            modules: {
                            toolbar: [
                                [{ 'header': [1, 2, 3, false] }],
                                ['bold', 'italic', 'underline', 'strike'],
                                ['link', 'image', 'video'],
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                                [{ 'indent': '-1'}, { 'indent': '+1' }],
                                [{ 'align': [] }],
                                [{ 'color': [] }],
                                ['code-block'], // Added for source code editing
                                ['clean']
                            ],
                            htmlEditButton: {
                                debug: false, // logging, default:false
                                msg: "Edit the content in HTML format", //Custom message to display in the editor, default: Edit HTML here, when you click "OK" the quill editor's contents will be replaced
                                okText: "Ok", // Text to display in the OK button, default: Ok,
                                cancelText: "Cancel", // Text to display in the cancel button, default: Cancel
                                buttonHTML: "&lt;&gt;", // Text to display in the toolbar button, default: <>
                                buttonTitle: "Show HTML source", // Text to display as the tooltip for the toolbar button, default: Show HTML source
                                syntax: false, // Show the HTML with syntax highlighting. Requires highlightjs on window.hljs (similar to Quill itself), default: false
                                prependSelector: 'div#myelement', // a string used to select where you want to insert the overlayContainer, default: null (appends to body),
                                editorModules: {} // The default mod
                            }
                            },
                            theme: 'snow'  // Specify theme (snow or bubble)
                        });
                    }
                }
            });

            $('#getDataButton').on('click',function(){
                var content = quill.root.innerHTML;
                storeCompositionData(content);
                
            })
        })
            
    </script>
{% endblock %}