(function($) {
    var pageContent = pageContentData.content;
    var websiteUrl = pageContentData.websiteUrl;
    var myRevisionsUrl = pageContentData.myRevisionsUrl;

    document.addEventListener('DOMContentLoaded', function() {

        setTimeout(() => {
            // display tutorial
            let editorWriting = document.querySelector('.edit-post-visual-editor');
            let writingSpace = document.querySelector('.block-editor-writing-flow');
            let sidePannel = document.querySelector('.interface-interface-skeleton__sidebar');
            if (writingSpace) {
                writingSpace.style.maxWidth = "75vw";
                writingSpace.style.overflowX = "hidden";
                sidePannel.style.maxWidth = "25vw";
                sidePannel.style.overflowX = "hidden";
                writingSpace.style.padding = "0";
                let tutorialWrapper = document.createElement('div');
                let tutorialTitle = document.createElement('p');
                tutorialWrapper.prepend(tutorialTitle);
                tutorialTitle.innerText = "Notice d'utilisation de l'espace contribution";
                tutorialTitle.style.fontSize = "1.3rem";
                tutorialWrapper.setAttribute('id', 'tutorial_editor');
                tutorialWrapper.style.width = "100%";
                tutorialWrapper.style.backgroundColor = "#384756";
                tutorialWrapper.style.padding = "20px";
                tutorialWrapper.innerHTML += pageContent;
                for (let tutorialParagraph of tutorialWrapper.children) {
                    tutorialParagraph.style.marginBottom = '10px';
                }
                sidePannel.appendChild(tutorialWrapper);
            }

            // create the go back to the index button and the go back to my revisions page
            let pannel = document.querySelector('.interface-pinned-items');
            if (pannel) {
                let backToIndexButton = document.createElement('div');
                let backToIndexLink = document.createElement('a');
                backToIndexLink.setAttribute('href', websiteUrl);
                backToIndexLink.innerHTML = "← Retour à la Partition";
                backToIndexLink.style.color = "white";
                backToIndexLink.style.padding = "6px 8px";
                backToIndexLink.style.border = "solid 1px white";
                backToIndexButton.style.paddingTop = '7px';
                backToIndexButton.style.marginRight = '5px';
                backToIndexButton.appendChild(backToIndexLink);
                backToIndexButton.setAttribute('id', 'backToIndexButton');
                pannel.prepend(backToIndexButton);

                let backToMyRevisionsButton = document.createElement('div');
                let backToMyRevisionsLink = document.createElement('a');
                backToMyRevisionsLink.setAttribute('href', myRevisionsUrl);
                backToMyRevisionsLink.innerHTML = "← Liste des contributions";
                backToMyRevisionsLink.style.color = "white";
                backToMyRevisionsLink.style.padding = "6px 8px";
                backToMyRevisionsLink.style.border = "solid 1px white";
                backToMyRevisionsButton.style.paddingTop = '7px';
                backToMyRevisionsButton.style.marginRight = '5px';
                backToMyRevisionsButton.appendChild(backToMyRevisionsLink);
                backToMyRevisionsButton.setAttribute('id', 'backToMyRevisionsButton');
                pannel.prepend(backToMyRevisionsButton);
            }

            // transformer le "article" en "envoyer"
            let tabButton = document.querySelector('.components-button.edit-post-sidebar__panel-tab');
            if (tabButton) {
                tabButton.innerText = "Soumettre la contribution";
            }
        }, 2000);
    })

})(jQuery);