@(study: common.Study)

@* Study description offcanvas *@
<div class="offcanvas offcanvas-end rounded-start-4 shadow" id="studyDescriptionSidebar" tabindex="-1" data-bs-config='{"backdrop": true, "keyboard": true, "scroll": false}'>
    <div class="offcanvas-header border-bottom align-items-start">
        <div class="offcanvas-title fw-bold flex-grow-1 text-truncate">
            <div class="fw-light text-truncate">Description of</div>
            <div class="text-truncate" id="studyDescriptionTitle"></div>
        </div>
        <button class="btn btn-study text-nowrap ms-2" id="studyDescriptionEdit" type="button" data-bs-tooltip="Switch between the description and its editor"><i class="bi-pencil-square me-1"></i>Edit</button>
        <div class="ms-2 text-nowrap">
            <button class="btn btn-resize btn-xs btn-nav" id="studyDescriptionResize" type="button" data-bs-tooltip="Maximise description"></button>
            <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="offcanvas"></button>
        </div>
    </div>
    <div class="offcanvas-body">
        <div class="mb-3" id="studyDescription" data-markdown="@study.getDescription()"></div>
        <div class="d-none" id="studyDescriptionEditorWrapper">
            <div class="form-control" id="studyDescriptionEditor"></div>
            <div class="d-flex gap-1 pt-2" id="studyDescriptionEditorFooter">
                <span class="flex-grow-1">
                    <i class="bi bi-markdown-fill me-1"></i><a href="https://www.markdownguide.org/getting-started/" target="_blank">Markdown</a>
                    is supported
                </span>
                <button type="button" class="btn btn-secondary" id="studyDescriptionEditorCancel">Cancel</button>
                <button type="button" class="btn btn-study" id="studyDescriptionEditorSave">Save</button>
            </div>
        </div>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Editor from "@routes.Assets.versioned("lib/jatos-gui/javascripts/editor.js")";
    import * as ConfirmationModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/confirmationModal.js")";

    const alerts = new Alerts.Named("study-description");

    $("#studyDescriptionSidebar").on('hide.bs.offcanvas', alerts.hideAll);

    $("#studyDescriptionSidebar").on('show.bs.offcanvas', draw);

    function draw() {
        $("#studyDescriptionTitle").html(window.study.title);
        const markdown = $("#studyDescription").data().markdown;
        const html = markdown ? new showdown.Converter().makeHtml(markdown) : "Here could be a description of this study.";
        $('#studyDescription').html(html);
        $("#studyDescription a").attr("target", "_blank");
    }

    $("#studyDescriptionResize").click(function() {
        $("#studyDescriptionSidebar").toggleClass("w-100");
    });

    function toggleEditor() {
        $("#studyDescriptionEditorWrapper").toggleClass("d-none");
        $("#studyDescription").toggleClass("d-none");
    }

    $("#studyDescriptionEdit").click(function() {
        toggleEditor();

        if ($("#studyDescriptionEditorWrapper").hasClass("d-none")) {
            // Generate HTML from Markdown
            const markdown = Editor.getValue("#studyDescriptionEditor");
            const sanitizedMarkdown = Helpers.encodeHtmlEntities(markdown);
            $("#studyDescription").data("markdown", sanitizedMarkdown);
            draw();
        } else {
            // Setup editor
            const markdown = $("#studyDescription").data().markdown;
            const unsanitizedMarkdown = Helpers.decodeHtmlEntities(markdown);
            const bodySelector = "#studyDescriptionSidebar .offcanvas-body";
            const editorHeight = $(bodySelector).height() - $("#studyDescriptionEditorFooter").outerHeight();
            const editorLineHeight = Number($(bodySelector).css('line-height').replace(/\D/g, ''));
            const maxLines = Math.round(editorHeight / editorLineHeight);
            Editor.setup("markdown", unsanitizedMarkdown, "#studyDescriptionEditor", maxLines);
            Editor.focus("#studyDescriptionEditor");
        }
    });

    $("#studyDescriptionEditorSave").click(function() {
        const markdown = Editor.getValue("#studyDescriptionEditor");
        $.ajax({
            type: 'POST',
            url: window.routes.Studies.submitDescription(window.study.id),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            contentType: 'text/plain; charset=utf-8',
            processData: false,
            data: markdown,
            success: function(response) {
                $("#studyDescription").data("markdown", markdown);
                draw();
                toggleEditor();
                alerts.success("The study description was changed successfully.");
            },
            error: function(err) {
                alerts.warning("The study description was not saved.", 5000);
                const errMsg = err.responseText ? err.responseText : "Couldn't save study description";
                alerts.error(errMsg);
            }
        });
    });

    $("#studyDescriptionEditorCancel").click(toggleEditor);

</script>