{% if script %}
    <script src="{{ baseURLComposant }}/esm-unbundled/node_modules/web-animations-js/web-animations-next.min.js"></script>
    <script src="{{ baseURLComposant }}/esm-unbundled/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="{{ baseURLComposant }}/esm-unbundled/node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
    <script type="module">
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('{{ baseURLComposant }}/esm-unbundled/service-worker.js');
        }
        WebComponents.waitFor(() => {
            var e = document.createElement('script');
            e.src = '{{ baseURLComposant }}/esm-unbundled/build/bundle.min.js';
            e.type = 'module';
            e.onload = function () {
                if (window.loadModules) {
                    window.loadModules('{{ baseURLComposant }}/esm-unbundled/build');
                    document.body.hidden = false;
                }
            };
            document.body.appendChild(e);
        });
    </script>
{% endif %}

<!-- Most common used flex styles-->
<dom-module id="iron-flex">
    <template>
        <style>
            .layout.horizontal,
            .layout.vertical {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
            }

            .layout.inline {
                display: -ms-inline-flexbox;
                display: -webkit-inline-flex;
                display: inline-flex;
            }

            .layout.horizontal {
                -ms-flex-direction: row;
                -webkit-flex-direction: row;
                flex-direction: row;
            }

            .layout.vertical {
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
                flex-direction: column;
            }

            .layout.wrap {
                -ms-flex-wrap: wrap;
                -webkit-flex-wrap: wrap;
                flex-wrap: wrap;
            }

            .layout.no-wrap {
                -ms-flex-wrap: nowrap;
                -webkit-flex-wrap: nowrap;
                flex-wrap: nowrap;
            }

            .layout.center,
            .layout.center-center {
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            .layout.center-justified,
            .layout.center-center {
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
            }

            .flex {
                -ms-flex: 1 1 0.000000001px;
                -webkit-flex: 1;
                flex: 1;
                -webkit-flex-basis: 0.000000001px;
                flex-basis: 0.000000001px;
            }

            .flex-auto {
                -ms-flex: 1 1 auto;
                -webkit-flex: 1 1 auto;
                flex: 1 1 auto;
            }

            .flex-none {
                -ms-flex: none;
                -webkit-flex: none;
                flex: none;
            }
        </style>
    </template>
</dom-module>

<!-- Basic flexbox reverse styles -->
<dom-module id="iron-flex-reverse">
    <template>
        <style>
            .layout.horizontal-reverse,
            .layout.vertical-reverse {
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
            }

            .layout.horizontal-reverse {
                -ms-flex-direction: row-reverse;
                -webkit-flex-direction: row-reverse;
                flex-direction: row-reverse;
            }

            .layout.vertical-reverse {
                -ms-flex-direction: column-reverse;
                -webkit-flex-direction: column-reverse;
                flex-direction: column-reverse;
            }

            .layout.wrap-reverse {
                -ms-flex-wrap: wrap-reverse;
                -webkit-flex-wrap: wrap-reverse;
                flex-wrap: wrap-reverse;
            }
        </style>
    </template>
</dom-module>

<!-- Flexbox alignment -->
<dom-module id="iron-flex-alignment">
    <template>
        <style>
            /**
             * Alignment in cross axis.
             */
            .layout.start {
                -ms-flex-align: start;
                -webkit-align-items: flex-start;
                align-items: flex-start;
            }

            .layout.center,
            .layout.center-center {
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }

            .layout.end {
                -ms-flex-align: end;
                -webkit-align-items: flex-end;
                align-items: flex-end;
            }

            .layout.baseline {
                -ms-flex-align: baseline;
                -webkit-align-items: baseline;
                align-items: baseline;
            }

            /**
             * Alignment in main axis.
             */
            .layout.start-justified {
                -ms-flex-pack: start;
                -webkit-justify-content: flex-start;
                justify-content: flex-start;
            }

            .layout.center-justified,
            .layout.center-center {
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
            }

            .layout.end-justified {
                -ms-flex-pack: end;
                -webkit-justify-content: flex-end;
                justify-content: flex-end;
            }

            .layout.around-justified {
                -ms-flex-pack: distribute;
                -webkit-justify-content: space-around;
                justify-content: space-around;
            }

            .layout.justified {
                -ms-flex-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
            }

            /**
             * Self alignment.
             */
            .self-start {
                -ms-align-self: flex-start;
                -webkit-align-self: flex-start;
                align-self: flex-start;
            }

            .self-center {
                -ms-align-self: center;
                -webkit-align-self: center;
                align-self: center;
            }

            .self-end {
                -ms-align-self: flex-end;
                -webkit-align-self: flex-end;
                align-self: flex-end;
            }

            .self-stretch {
                -ms-align-self: stretch;
                -webkit-align-self: stretch;
                align-self: stretch;
            }

            .self-baseline {
                -ms-align-self: baseline;
                -webkit-align-self: baseline;
                align-self: baseline;
            }

            /**
             * multi-line alignment in main axis.
             */
            .layout.start-aligned {
                -ms-flex-line-pack: start; /* IE10 */
                -ms-align-content: flex-start;
                -webkit-align-content: flex-start;
                align-content: flex-start;
            }

            .layout.end-aligned {
                -ms-flex-line-pack: end; /* IE10 */
                -ms-align-content: flex-end;
                -webkit-align-content: flex-end;
                align-content: flex-end;
            }

            .layout.center-aligned {
                -ms-flex-line-pack: center; /* IE10 */
                -ms-align-content: center;
                -webkit-align-content: center;
                align-content: center;
            }

            .layout.between-aligned {
                -ms-flex-line-pack: justify; /* IE10 */
                -ms-align-content: space-between;
                -webkit-align-content: space-between;
                align-content: space-between;
            }

            .layout.around-aligned {
                -ms-flex-line-pack: distribute; /* IE10 */
                -ms-align-content: space-around;
                -webkit-align-content: space-around;
                align-content: space-around;
            }
        </style>
    </template>
</dom-module>

<dom-module id="iron-flex-factors">
    <template>
        <style>
            .flex,
            .flex-1 {
                -ms-flex: 1 1 0.000000001px;
                -webkit-flex: 1;
                flex: 1;
                -webkit-flex-basis: 0.000000001px;
                flex-basis: 0.000000001px;
            }

            .flex-2 {
                -ms-flex: 2;
                -webkit-flex: 2;
                flex: 2;
            }

            .flex-3 {
                -ms-flex: 3;
                -webkit-flex: 3;
                flex: 3;
            }

            .flex-4 {
                -ms-flex: 4;
                -webkit-flex: 4;
                flex: 4;
            }

            .flex-5 {
                -ms-flex: 5;
                -webkit-flex: 5;
                flex: 5;
            }

            .flex-6 {
                -ms-flex: 6;
                -webkit-flex: 6;
                flex: 6;
            }

            .flex-7 {
                -ms-flex: 7;
                -webkit-flex: 7;
                flex: 7;
            }

            .flex-8 {
                -ms-flex: 8;
                -webkit-flex: 8;
                flex: 8;
            }

            .flex-9 {
                -ms-flex: 9;
                -webkit-flex: 9;
                flex: 9;
            }

            .flex-10 {
                -ms-flex: 10;
                -webkit-flex: 10;
                flex: 10;
            }

            .flex-11 {
                -ms-flex: 11;
                -webkit-flex: 11;
                flex: 11;
            }

            .flex-12 {
                -ms-flex: 12;
                -webkit-flex: 12;
                flex: 12;
            }
        </style>
    </template>
</dom-module>

<!-- Non-flexbox positioning helper styles -->
<dom-module id="iron-positioning">
    <template>
        <style>
            .block {
                display: block;
            }

            [hidden] {
                display: none !important;
            }

            .invisible {
                visibility: hidden !important;
            }

            .relative {
                position: relative;
            }

            .fit {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }

            body.fullbleed {
                margin: 0;
                height: 100vh;
            }

            .scroll {
                -webkit-overflow-scrolling: touch;
                overflow: auto;
            }

            /* fixed position */
            .fixed-bottom,
            .fixed-left,
            .fixed-right,
            .fixed-top {
                position: fixed;
            }

            .fixed-top {
                top: 0;
                left: 0;
                right: 0;
            }

            .fixed-right {
                top: 0;
                right: 0;
                bottom: 0;
            }

            .fixed-bottom {
                right: 0;
                bottom: 0;
                left: 0;
            }

            .fixed-left {
                top: 0;
                bottom: 0;
                left: 0;
            }
        </style>
    </template>
</dom-module>

<!--
    Custom Element with Ace code editor
    http://juicy.github.io/juicy-ace-editor/
    version: 2.1.0
    @demo index.html
    @license MIT
    @author
-->
<script src="{{ baseURLComposant }}/esm-unbundled/build/bower_components/ace-builds/src-noconflict/ace.js"
        type="text/javascript" charset="utf-8"></script>
<script src="{{ baseURLComposant }}/esm-unbundled/build/bower_components/ace-builds/src-noconflict/ext-searchbox.js"
        type="text/javascript" charset="utf-8"></script>

<template id="juicy-ace-editor">
    <style>
        :host {
            display: flex;
            min-height: 1em;
            flex-direction: column;
        }

        #juicy-ace-editor-container {
            flex: 1;
            height: 100%;
        }
    </style>
    <div id="juicy-ace-editor-container"></div>
</template>
<script>
    (function (window, document, undefined) {
        // Refers to the "importer", which is index.html
        var thatDoc = document;

        // Refers to the "importee", which is juicy-ace-editor.html
        var thisDoc = (document._currentScript || document.currentScript).ownerDocument;

        // Gets content from <template>
        var template = thisDoc.querySelector('template#juicy-ace-editor').content;

        // Shim Shadow DOM styles if needed
        if (window.ShadowDOMPolyfill) {
            WebComponents.ShadowCSS.shimStyling(template, 'juicy-ace-editor');
        }

        // Creates an object based in the HTML Element prototype
        window.customElements.define('juicy-ace-editor', class JuicyAceEditor extends HTMLElement {
            // getter/setter for value property
            get value() {
                return this.editor && this.editor.getValue() || this.textContent;
            }

            set value(val) {
                if (this.editor) {
                    this.editor.setValue(val);
                } else {
                    this.textContent = val;
                }
            }

            // list of observable attributes
            static get observedAttributes() {
                return ['theme', 'mode', 'fontsize', 'softtabs', 'tabsize', 'readonly', 'wrapmode', 'min-lines', 'max-lines', 'shadow-style'];
            }

            // Fires when an instance of the element is created
            constructor(self) {
                // Polyfill ceveat we need to fetch the right context;
                // https://github.com/WebReflection/document-register-element/tree/master#v1-caveat
                self = super(self);
                // Creates the shadow root
                var shadowRoot;
                if (self.attachShadow && self.getRootNode) {
                    shadowRoot = self.attachShadow({mode: 'open'});
                } else {
                    shadowRoot = self.createShadowRoot();
                }
                // Adds a template clone into shadow root
                var clone = thatDoc.importNode(template, true);
                // getElementById may not be polyfilled yet
                self.container = clone.querySelector('#juicy-ace-editor-container');
                shadowRoot.appendChild(clone);
                return self;
            }

            connectedCallback() {
                var text = this.childNodes[0];
                var container = this.container;
                var element = this;
                var editor;

                if (this.editor) {
                    editor = this.editor;
                } else {
                    // container.appendChild(text);
                    container.textContent = this.value;
                    const options = {};
                    // support autoresizing
                    this.hasAttribute('max-lines') && (options.maxLines = Number(this.getAttribute('max-lines')));
                    this.hasAttribute('min-lines') && (options.minLines = Number(this.getAttribute('min-lines')));

                    editor = ace.edit(container, options);
                    this.dispatchEvent(new CustomEvent("editor-ready", {
                        bubbles: true,
                        composed: true,
                        detail: editor
                    }));
                    this.editor = editor;

                    // inject base editor styles
                    this.injectTheme('#ace_editor\\.css');
                    this.injectTheme('#ace-tm');
                    this.injectTheme('#ace_searchbox');

                    editor.getSession().on('change', function (event) {
                        element.dispatchEvent(new CustomEvent("change", {
                            bubbles: true,
                            composed: true,
                            detail: event
                        }));
                    });
                }

                // handle theme changes
                editor.renderer.addEventListener("themeLoaded", this.onThemeLoaded.bind(this));

                // initial attributes
                editor.setTheme(this.getAttribute("theme"));
                editor.setFontSize(Number(this.getAttribute("fontsize")) || 12);
                editor.setReadOnly(this.hasAttribute("readonly"));
                var session = editor.getSession();
                session.setMode(this.getAttribute("mode"));
                session.setUseSoftTabs(this.getAttribute("softtabs"));
                this.getAttribute("tabsize") && session.setTabSize(this.getAttribute("tabsize"));
                session.setUseWrapMode(this.hasAttribute("wrapmode"));
                // non ace specific
                this.hasAttribute("shadow-style") && this.injectTheme(this.getAttribute('shadow-style'));


                // Observe input textNode changes
                // Could be buggy as editor was also added to Light DOM;
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutation) {
                        // console.log("observation", mutation.type, arguments, mutations, editor, text);
                        if (mutation.type == "characterData") {
                            element.value = text.data;
                        }
                    });
                });
                text && observer.observe(text, {characterData: true});
                // container.appendChild(text);
                this._attached = true;
            }

            disconnectedCallback() {
                this._attached = false;
            }

            attributeChangedCallback(attr, oldVal, newVal) {
                if (!this._attached) {
                    return false;
                }
                switch (attr) {
                    case "theme":
                        this.editor.setTheme(newVal);
                        break;
                    case "mode":
                        this.editor.getSession().setMode(newVal);
                        break;
                    case "fontsize":
                        this.editor.setFontSize(newVal);
                        break;
                    case "softtabs":
                        this.editor.getSession().setUseSoftTabs(newVal);
                        break;
                    case "tabsize":
                        this.editor.getSession().setTabSize(newVal);
                        break;
                    case "readonly":
                        this.editor.setReadOnly(newVal === '' || newVal);
                        break;
                    case "wrapmode":
                        this.editor.getSession().setUseWrapMode(newVal !== null);
                        break;
                    case "max-lines":
                        this.editor && (this.editor.renderer.$maxLines = Number(newVal));
                        break;
                    case "min-lines":
                        this.editor && (this.editor.renderer.$minLines = Number(newVal));
                        break;
                    // non-Ace specific
                    case 'shadow-style':
                        if (oldVal) {
                            this.shadowRoot.querySelector(oldVal).remove();
                        }
                        this.injectTheme(newVal);

                }
            }

            onThemeLoaded(e) {
                var themeId = "#" + e.theme.cssClass;
                this.injectTheme(themeId);
                // Workaround Chrome stable bug, force repaint
                this.container.style.display = 'none';
                this.container.offsetHeight;
                this.container.style.display = '';
            }

            /**
             * Injects a style element into juicy-ace-editor's shadow root
             * @param {CSSSelector} selector for an element in the same shadow tree or document as `juicy-ace-editor`
             */
            injectTheme(selector) {
                const lightStyle = this.getRootNode().querySelector(selector) || document.querySelector(selector);
                this.shadowRoot.appendChild(lightStyle.cloneNode(true));
            }
        });

    }(window, document));
</script>