{% block multitype_widget %}
    <input style="display:none" type="color" id="Configuration_value_color" data-ea-align="left" class="form-control form-control-color" value="{{ value }}">
    <input type="text" id="Configuration_value_text" data-ea-align="left" class="form-control" value="{{ value }}">
    <textarea style="display:none" rows="6" id="Configuration_value_textarea" class="form-control">{{ value }}</textarea>
    <textarea style="display:none" rows="12" id="Configuration_value_textrich" class="form-control">{{ value }}</textarea>
    <div>
    <input type="hidden" id="Configuration_value" name="Configuration[value]" data-ea-align="left" class="form-control" value="{{ value }}">
    </div>
    <script>
    var CKEDITOR_BASEPATH = "/bundles/fosckeditor/";
    function initInputMultitype(){
        const input = document.querySelector('#Configuration_value');
            document.querySelector('#Configuration_value_color').style.display = "none";
            document.querySelector('#Configuration_value_text').style.display = "none";
            document.querySelector('#Configuration_value_textarea').style.display = "none";
            removeCkeditor();
            document.querySelector('#Configuration_value_textrich').style.display = "none";

        if(document.querySelector('[name$="[type]"]').value == "color") {
            input.value = document.querySelector('#Configuration_value_color').value
            document.querySelector('#Configuration_value_color').style.display = "block";
        } else if(document.querySelector('[name$="[type]"]').value == "textarea") {
            input.value = document.querySelector('#Configuration_value_textarea').value
            document.querySelector('#Configuration_value_textarea').style.display = "block";
        } else if(document.querySelector('[name$="[type]"]').value == "textrich") {
            input.value = document.querySelector('#Configuration_value_textrich').value
            setCkeditor();
        } else {
            input.value = document.querySelector('#Configuration_value_text').value
            document.querySelector('#Configuration_value_text').style.display = "block";
        }
    }

    document.querySelector('[name$="[type]"]').onchange = initInputMultitype;
    document.querySelector('[id="Configuration_value_text"]').onchange = changeInputMultitype;
    document.querySelector('[id="Configuration_value_text"]').onkeydown = changeInputMultitype;
    document.querySelector('[id="Configuration_value_text"]').onkeyup = changeInputMultitype;

    document.querySelector('[id="Configuration_value_textarea"]').onchange = changeInputMultitype;
    document.querySelector('[id="Configuration_value_textarea"]').onkeydown = changeInputMultitype;
    document.querySelector('[id="Configuration_value_textarea"]').onkeyup = changeInputMultitype;

    document.querySelector('[id="Configuration_value_color"]').onchange = changeInputMultitype;
    document.querySelector('[id="Configuration_value_color"]').onkeydown = changeInputMultitype;
    document.querySelector('[id="Configuration_value_color"]').onkeyup = changeInputMultitype;

    {# TODO FOR cKEDITOR document.querySelector('[id="Configuration_value_color"]').onchange = changeInputMultitype;
    document.querySelector('[id="Configuration_value_color"]').onkeydown = changeInputMultitype;
    document.querySelector('[id="Configuration_value_color"]').onkeyup = changeInputMultitype; #}
    
    function changeInputMultitype(){
        const input = document.querySelector('#Configuration_value');
        if(document.querySelector('[name$="[type]"]').value == "color") {
            input.value = document.querySelector('#Configuration_value_color').value
        } else if (document.querySelector('[name$="[type]"]').value == "textarea") {
            input.value = document.querySelector('#Configuration_value_textarea').value
        } else if (document.querySelector('[name$="[type]"]').value == "textrich") {
            input.value = CKEDITOR.instances['Configuration_value_textrich'].getData().replace("<p>","").replace("</p>","");
        } else {
            input.value = document.querySelector('#Configuration_value_text').value
        }
    }
    function setCkeditor() {
        var editor = CKEDITOR.replace( 'Configuration_value_textrich', {
            uiColor : '#fefefe',
            toolbar:[["Bold","Italic","Underline","Strike","Blockquote","-","Link","Nbsp","-","RemoveFormat","-","NumberedList","BulletedList","-","Outdent","Indent","-","-","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock","-","Image","Table","-","Format","FontSize"]]
            //removeButtons: "Indent,Outdent,Cut,Copy,Paste,PasteText,PasteFromWord,Undo,Redo,NumberedList,BulletedList,Subscript,Superscript,About,Anchor"
        } );
        editor.on('change',function(event){
            changeInputMultitype();
        });
    }
    function removeCkeditor() {
        for(name in CKEDITOR.instances){
            CKEDITOR.instances[name].destroy()
        }
    }
    
    document.addEventListener("DOMContentLoaded", initInputMultitype);
    </script>
    <script src='/js/ckeditor.js'></script>
{% endblock %}