@(request: Http.Request, signedinUser: common.User, breadcrumbs: String, study: common.Study, studyResultsCount: Integer)

@views.html.gui.page.main(request, signedinUser, Some(study), None, breadcrumbs) {

<main class="container-xxl overflow-auto mt-4">

    @* Study toolbar *@
    <div class="sticky-top text-nowrap d-flex flex-wrap gap-1 pb-4" id="studyToolbar" role="toolbar">
            <div class="btn-group me-3 no-info-icon" role="group" data-bs-tooltip="Do a single test run of your study or run the same study multiple times in parallel">
                <a class="btn btn-study" id="runStudy" href="#" type="button">
                    <i class="bi-play-circle"></i><span class="d-none d-xl-inline ps-1">Run</span>
                </a>
                <button class="btn btn-study dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                    <span class="visually-hidden">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-study">
                    <li class="no-info-icon" data-bs-tooltip="Run 2 studies in parallel">
                        <a class="dropdown-item" id="runStudy2x1" href="#"><i class="bi-play-circle pe-1"></i>Run 2x1</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Run 3 studies in parallel">
                        <a class="dropdown-item" id="runStudy3x1" href="#"><i class="bi-play-circle pe-1"></i>Run 3x1</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Run 4 studies in parallel">
                        <a class="dropdown-item" id="runStudy2x2" href="#"><i class="bi-play-circle pe-1"></i>Run 2x2</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Run 6 studies in parallel">
                        <a class="dropdown-item" id="runStudy3x2" href="#"><i class="bi-play-circle pe-1"></i>Run 3x2</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Run 8 studies in parallel">
                        <a class="dropdown-item" id="runStudy4x2" href="#"><i class="bi-play-circle pe-1"></i>Run 4x2</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Run 9 studies in parallel">
                        <a class="dropdown-item" id="runStudy3x3" href="#"><i class="bi-play-circle pe-1"></i>Run 3x3</a>
                    </li>
                </ul>
            </div>
            <button class="btn btn-study" id="studyResults" type="button" data-bs-tooltip="Show this study results">
                Results<span class="badge text-study bg-white rounded-pill ms-1">@studyResultsCount</span>
            </button>
            <button class="btn btn-study" id="studyProperties" type="button" data-bs-toggle="modal" data-bs-target="#studyPropertiesModal" data-bs-tooltip="Change this study's properties">
                <i class="bi-gear-fill"></i><span class="d-none d-xl-inline ps-1">Properties</span>
            </button>
            <button class="btn btn-study" id="exportStudy" type="button" data-bs-tooltip="Export this study to your local file system (including its components and study assets but without its results)">
                <i class="bi-box-arrow-up-right"></i><span class="d-none d-xl-inline ps-1">Export</span>
            </button>
            <button class="btn btn-study" id="lockStudy" type="button" data-bs-tooltip="Lock/unlock this study. A locked study cannot be changed (e.g. its properties), but its study links will still work. This is useful during data collection to prevent accidental changes in a study setup.">
                <i class="bi-unlock-fill"></i>
            </button>
            <button class="btn btn-study" type="button" data-bs-toggle="offcanvas" data-bs-target="#studyDescriptionSidebar" data-bs-tooltip="The description of this study like defined in the study properties">
                <i class="bi-file-text-fill"></i><span class="d-none d-xl-inline ps-1">Description</span>
            </button>
            <div class="btn-group me-3" role="group">
                <button class="btn btn-study dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="bi-three-dots-vertical d-xl-none"></i><span class="d-none d-xl-inline ps-1">More</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-study">
                    <li class="no-info-icon" data-bs-tooltip="Clone this study without its results">
                        <a class="dropdown-item" id="cloneStudy" href="#"><i class="bi-copy pe-1"></i>Clone</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Change which users can access this study">
                        <a class="dropdown-item" data-bs-toggle="modal" href="#studyMemberUsersModal"><i class="bi-people-fill pe-1"></i>Change users</a>
                    </li>
                    <li class="no-info-icon" data-bs-tooltip="Show this study's study log">
                        <a class="dropdown-item" data-bs-toggle="modal" href="#studyLogModal"><i class="bi-journal-text pe-1"></i>Study log</a>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li class="no-info-icon" data-bs-tooltip="Delete this study including its components, assets and results">
                        <a class="dropdown-item" id="removeStudy" href="#"><i class="bi-x-circle-fill pe-1"></i>Delete</a>
                    </li>
                </ul>
            </div>
            <button class="btn btn-component me-3" data-bs-toggle="modal" data-bs-target="#componentCreatorModal" type="button" data-bs-tooltip="Add a new component">
                <i class="bi-plus-lg fw-bold"></i><span class="d-none d-xl-inline ps-1">New Component</span>
            </button>
            <button class="btn btn-batch" id="studyLinksButton" type="button" data-bs-tooltip="Get study links that you can distribute to your workers (participants) and let them run your study">
                <i class="bi-link-45deg"></i><span class="d-none d-xl-inline ps-1">Study Links</span>
            </button>
    </div>

    @views.html.gui.study.components(study)

</main>
}

@views.html.gui.study.studyPropertiesModal()
@views.html.gui.study.studyDescription(study)
@views.html.gui.study.studyMemberUsersModal()
@views.html.gui.study.componentCreatorModal()
@views.html.gui.study.componentPropertiesModal()
@views.html.gui.study.studyLogModal()

<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 ConfirmationModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/confirmationModal.js")";
    import * as WaitingModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/waitingModal.js")";
    import * as FileSystemAccess from "@routes.Assets.versioned("lib/jatos-gui/javascripts/fileSystemAccess.js")";
    import * as InfoCard from "@routes.Assets.versioned("lib/jatos-gui/javascripts/infoCard.js")";

    if (!window.study.isActive) Alerts.warning("An admin deactivated this study. Although you can still edit this study, it can't be run by you nor by a worker. Please contact your admin.");

    $("#studyToolbar").before(InfoCard.render([
        {"name": "Study ID", "value": window.study.id, "tooltip": "This ID is unique within this JATOS instance"},
        {"name": "Study UUID", "value": window.study.uuid, "tooltip": "Universally unique identifier - used to keep track of studies between different JATOS instances"},
        {"name": "Study assets", "value": window.study.dirName, "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."}
    ]));

    const studyResultButtonTooltip = @studyResultsCount > 0
            ? "This study has @studyResultsCount study result(s) so far. Click here to go to the study result page."
            : "This study has no study results yet. Maybe do a test run to generate one.";
    $("#studyResults").attr("data-bs-tooltip", studyResultButtonTooltip);

    drawLockButton();

    $('#lockStudy').click(function() {
        $.ajax({
            url : window.routes.Studies.toggleLock(window.study.id),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success : function(response) {
                window.study.isLocked = response === 'true';
                drawLockButton();

            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle study lock")
        });
    });

    function drawLockButton() {
        if (window.study.isLocked) {
            $('#lockStudy').html('<i class="bi-lock-fill"></i>');
            $('#lockStudy').removeClass('btn-study').addClass('btn-warning');
        } else {
            $('#lockStudy').html('<i class="bi-unlock-fill"></i>');
            $('#lockStudy').removeClass('btn-warning').addClass('btn-study');
        }
    }

    // Set the href property in code so users can use the Ctrl + click to open the study run in a different tab
    $('#runStudy').prop("href", `${window.routes.Studies.runStudy(window.study.id)}`);
    $('#runStudy2x1').prop("href", `${window.routes.Studies.runStudy(window.study.id, 2, 2, 1)}`);
    $('#runStudy3x1').prop("href", `${window.routes.Studies.runStudy(window.study.id, 3, 3, 1)}`);
    $('#runStudy2x2').prop("href", `${window.routes.Studies.runStudy(window.study.id, 4, 2, 2)}`);
    $('#runStudy3x2').prop("href", `${window.routes.Studies.runStudy(window.study.id, 6, 3, 2)}`);
    $('#runStudy4x2').prop("href", `${window.routes.Studies.runStudy(window.study.id, 8, 4, 2)}`);
    $('#runStudy3x3').prop("href", `${window.routes.Studies.runStudy(window.study.id, 9, 3, 3)}`);

    $('#studyResults').click(function() {
        window.location.href = window.routes.StudyResults.studysStudyResults(window.study.id);
    });

    $('#studyLinksButton').click(function() {
        window.location.href = window.routes.StudyLinks.studyLinks(window.study.id);
    });

    $('#exportStudy').click(function() {
        const url = window.routes.Api.exportStudy(window.study.id);
        const filename = window.study.title + "." + window.common.studyArchiveSuffix;
        FileSystemAccess.downloadFileStream(url, null, filename);
    });

    $('#removeStudy').click(function() {
        const title = "Confirm deletion of a study";
        const htmlText = `<p>You are about to delete the study "<b>${window.study.title}" (ID ${window.study.id})
            with all its components, results, and the entire study assets directory</b>.</p>
            <p><b class="text-danger">This cannot be undone.</b></p>`;
        const action = function() {
            $.ajax({
                url : window.routes.Api.deleteStudy(window.study.id),
                type : 'DELETE',
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                beforeSend: WaitingModal.show,
                success : function(result) {
                    window.location.replace(window.routes.Home.home);
                },
                error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't delete study"),
                complete: WaitingModal.hide
            });
        };
        ConfirmationModal.show({ title: title, text: htmlText, btnText: 'Delete', safetyCheck: true, action: action });
    });

    $('#cloneStudy').click(function() {
        $.ajax({
            url : window.routes.Studies.cloneStudy(window.study.id),
            success : function(response) {
                Alerts.success(`Added clone "${response.title}". <a href="${window.routes.Studies.study(response.id)}">Go to this study.</a>`);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't clone study")
        });
    });
</script>