@* Edit study properties Modal *@
<div class="modal fade" id="studyPropertiesModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">Study properties</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form class="form-study" id="studyPropertiesForm">
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormTitle">
                            Title<span class="input-required" data-bs-tooltip="required"></span>
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="studyPropertiesFormTitle" name="title" placeholder="Your study title" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormDirName" data-bs-tooltip="Name of the directory that is linked to this study. In there all your study's assets, e.g. HTML, JavaScript, CSS, and images, will be saved.">
                            Study assets' directory name<span class="input-required" data-bs-tooltip="required"></span>
                        </label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="studyPropertiesFormDirName" name="dirName" placeholder="Study assets' directory name" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormComments" data-bs-tooltip="Something you want to share or just don't want to forget?">
                            Comments
                        </label>
                        <div class="col-sm-9">
                            <textarea rows="2" class="form-control" id="studyPropertiesFormComments" name="comments" placeholder="Your comments"></textarea>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyEntryMsg" data-bs-tooltip="This message can be shown to the worker before the study starts (if the study link format 'Confirm First' is chosen). It can be used as a confirmation (or simple consent) or to prevent workers to prematurely start the study. This message is meant to be short (up to 250 to 1000 characters).">
                            Study entry message
                        </label>
                        <div class="col-sm-9">
                            <textarea rows="2" class="form-control" id="studyEntryMsg" name="studyEntryMsg" placeholder=""></textarea>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormEndRedirectUrl" data-bs-tooltip="Choose the URL that JATOS should redirect to after a run of this study is finished. If left empty a default page will be shown.">
                            End redirect URL
                        </label>
                        <div class="col-sm-9">
                            <input type="url" class="form-control" id="studyPropertiesFormEndRedirectUrl" name="endRedirectUrl" placeholder="https://">
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormStudyInput" data-bs-tooltip="Your component scripts can use this input data. You can also leave it empty if not needed. Use the 'Pretty' button to format the JSON nicely.">
                            Study input<br>
                            <button type="button" class="btn btn-outline-secondary btn-sm pretty-json-button" data-target="#studyPropertiesJsonEditor" data-bs-tooltip="Format your JSON nicely">Pretty</button>
                        </label>
                        <div class="col-sm-9">
                            <div class="form-control" id="studyPropertiesJsonEditor"></div>
                            @* We use a hidden textarea here to transfer the JSON data into the form POST *@
                            <textarea id="studyPropertiesFormStudyInput" name="studyInput" hidden></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormGroupStudy" data-bs-tooltip="Is this a group study?">
                            Group study
                        </label>
                        <div class="form-check col-sm-9 ps-3 pt-2">
                            <label class="switch no-info-icon">
                                <input type="checkbox" class="form-check-input checkbox-study" id="studyPropertiesFormGroupStudy" name="groupStudy" value="true">
                                <span class="slider slider-study round"></span>
                            </label>
                            @* We need a hidden input field. http://stackoverflow.com/questions/8204708/how-do-i-bind-a-checkbox-to-a-boolean-in-play-framework *@
                            <input type="hidden" name="groupStudy" value="false" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormLinearStudy" data-bs-tooltip="Should the study flow be linear only? This still allows reloading of components. Check this box to allow only to move to subsequent components.">
                            Linear study flow
                        </label>
                        <div class="form-check col-sm-9 ps-3 pt-2">
                            <label class="switch no-info-icon">
                                <input type="checkbox" class="form-check-input checkbox-study" id="studyPropertiesFormLinearStudy" name="linearStudy" value="true">
                                <span class="slider slider-study round"></span>
                            </label>
                            @* We need a hidden input field. http://stackoverflow.com/questions/8204708/how-do-i-bind-a-checkbox-to-a-boolean-in-play-framework *@
                            <input type="hidden" name="linearStudy" value="false" />
                        </div>
                    </div>
                    <div class="row">
                        <label class="col-sm-3 col-form-label" for="studyPropertiesFormAllowPreview" data-bs-tooltip="Allows a preview of the study run (only with Personal Single or General Single workers). If previews are allowed a study link can be used multiple times by the worker as long as the run stays in the first component. As soon as the second component is started the usual study link restrictions apply.">
                            Allow preview
                        </label>
                        <div class="form-check col-sm-9 ps-3 pt-2">
                            <label class="switch no-info-icon">
                                <input type="checkbox" class="form-check-input checkbox-study" id="studyPropertiesFormAllowPreview" name="allowPreview" value="true">
                                <span class="slider slider-study round"></span>
                            </label>
                            @* We need a hidden input field. http://stackoverflow.com/questions/8204708/how-do-i-bind-a-checkbox-to-a-boolean-in-play-framework *@
                            <input type="hidden" name="allowPreview" value="false" />
                        </div>
                    </div>
                    <textarea rows="3" class="form-control" id="studyPropertiesFormDescription" hidden></textarea>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-study" id="studyPropertiesConfirmed">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 FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")";
    import * as Editor from "@routes.Assets.versioned("lib/jatos-gui/javascripts/editor.js")";

    const alerts = new Alerts.Named("study-properties");
    $("#studyPropertiesModal").on('hide.bs.modal', alerts.hideAll);

    $("#studyPropertiesModal").on('show.bs.modal', function() {
        $.ajax({
            url: window.routes.Studies.properties(window.study.id),
            success: fillStudyPropertiesForm,
            error: (err) => alerts.error("Couldn't load study properties.")
        });
    });

    function fillStudyPropertiesForm(properties) {
        $("#studyPropertiesForm")[0].reset();
        FormValidation.clear("#studyPropertiesForm");
        $('#studyPropertiesModal').data(properties);
        Helpers.generateModalSubtitles("#studyPropertiesModal",
                {"ID": properties.studyId, "UUID": properties.uuid}, true);

        $('#studyPropertiesFormTitle').val(properties.title);
        $('#studyPropertiesFormDescription').val(properties.description ? properties.description: "");
        $('#studyPropertiesFormDirName').val(properties.dirName);
        $('#studyPropertiesFormComments').val(properties.comments ? properties.comments: "");
        $('#studyPropertiesFormEndRedirectUrl').val(properties.endRedirectUrl ? properties.endRedirectUrl: "");
        $('#studyEntryMsg').val(properties.studyEntryMsg ? properties.studyEntryMsg: "");
        Editor.setup("json", properties.studyInput, "#studyPropertiesJsonEditor");
        $('#studyPropertiesFormGroupStudy').prop('checked', properties.groupStudy);
        $('#studyPropertiesFormLinearStudy').prop('checked', properties.linearStudy);
        $('#studyPropertiesFormAllowPreview').prop('checked', properties.allowPreview);

        // Disable all fields if study is locked
        Helpers.disableForm("#studyPropertiesModal", window.study.isLocked);
        if (window.study.isLocked) {
            alerts.warning("Study is locked. It is not possible to edit the properties.");
        }
    }

    $("#studyPropertiesConfirmed").click(function() {
        const studyId = $('#studyPropertiesModal').data().studyId;

        // Put JSON from editor into textarea to let it be picked up by form.serialize
        const studyInput = Editor.getValue('#studyPropertiesJsonEditor');
        $("#studyPropertiesFormStudyInput").val(studyInput);

        $.ajax({
            type : 'POST',
            url : window.routes.Studies.submitEdited(studyId),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            data : $('#studyPropertiesForm').serialize(),
            success : function(response) {
                $('#studyPropertiesModal').modal('hide');
                Alerts.success("The study properties were changed successfully.");
                const title = $('#studyPropertiesFormTitle').val();
                $('#breadcrumbs .nav-item:last').text(title);
            },
            error : function(response) {
                FormValidation.clear("#studyPropertiesForm");
                alerts.warning("Study properties were not saved", 5000);
                if (Helpers.isJson(response.responseText)) {
                    FormValidation.show("#studyPropertiesForm", response.responseJSON);
                } else if (response.responseText) {
                    alerts.error(response.responseText);
                } else {
                    alerts.error("Couldn't change study properties");
                }
            }
        });
    });

</script>