@(request: Http.Request, signedinUser: common.User, breadcrumbs: String)

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

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

    <table class="table table-hover align-middle w-100" id="studyManagerTable">
        <thead>
            <tr>
                <th class="no-info-icon" data-bs-tooltip="A deactivated study cannot be started by participants (aka workers) anymore, but an already started study can be continued. The member users can still open and edit the study and export its result data.">Active<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th>ID<span class="ordering-icon"></span></th>
                <th>Title<span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="All users who are member of this study">Members<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Size of study assets folder">Study assets size<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Number of study results">Result count<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Size of result data: total for all study runs (average per result in brackets)">Result data size<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="Size of uploaded result files: total for all study runs (average per result in brackets)">Result file size<span class="info-icon"></span><span class="ordering-icon"></span></th>
                <th class="no-info-icon" data-bs-tooltip="When was this study last started by a participant (aka worker)?">Last started<span class="info-icon"></span><span class="ordering-icon"></span></th>
            </tr>
        </thead>
    </table>

</main>

<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 WaitingModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/waitingModal.js")";

    let dataTable;
    $(document).ready(function() {
        dataTable = $('#studyManagerTable').DataTable({
            "ajax": {
                "url" : window.routes.Admin.allStudiesData,
                "dataSrc": "",
                "beforeSend": WaitingModal.show,
                "error": () => Alerts.error("Error reading study data"),
                "complete": WaitingModal.hide
            },
            "dom": `<'d-flex flex-row flex-wrap justify-content-between align-items-center form-admin mt-1 mb-3'<'mb-2'f><'mb-2'l>>
                    rt
                    <'d-flex flex-row flex-wrap justify-content-between align-items-center mt-3'<'mb-2'i><'mb-2'p>>`,
            "order": [[ 6, "dsc" ]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "pageLength": 10,
            "pagingType": "full_numbers",
            "stateSave": true,
            "scrollX": true,
            "stateSaveParams": function (settings, data) {
                // does not work in FF
                data.search.search = "";
            },
            "columns": [
                {
                    "className": "active-study",
                    "data": null,
                    "searchable": false,
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data.active.toString();
                        return `
                            <label class="switch no-info-icon mt-1" data-bs-tooltip="Click to de-/activate this study. A deactivated study cannot be started by participants (aka workers) anymore, but an already started study can be continued. The member users can still open and edit the study and export its result data.">
                                <input type="checkbox" ${data.active ? "checked" : ""}>
                                <span class="slider slider-admin round"></span>
                            </label>
                        `;
                    }
                },
                {
                    "data": "id"
                },
                {
                    "data": "title",
                    "render": (data) => Helpers.trimTextWithThreeDots(data, 50)
                },
                {
                    "data": "members",
                    "render": Helpers.generateMembersHtml
                },
                {
                    "data": "studyAssetsSize",
                    "type": "num",
                    "render": function (data, type, full, meta) {
                        if (type === 'sort') return data.size;
                        if (data.humanReadable == "disabled") {
                            return '<button type="button" class="study-assets-size btn btn-nav btn-sm">Show</a>';
                        } else {
                            return data.humanReadable;
                        }
                    }
                },
                {
                    "data": "studyResultCount",
                },
                {
                    "type": "num",
                    "data": "resultDataSize",
                    "render": function (data, type, full, meta) {
                        if (type === 'sort') return data.size;
                        if (data.humanReadable == "disabled") {
                            return '<button type="button" class="result-data-size btn btn-nav btn-sm">Show</a>';
                        } else {
                            return data.humanReadable;
                        }
                    }
                },
                {
                    "type": "num",
                    "data": "resultFileSize",
                    "render": function (data, type, full, meta) {
                        if (type === 'sort') return data.size;
                        if (data.humanReadable == "disabled") {
                            return '<button type="button" class="result-file-size btn btn-nav btn-sm">Show</a>';
                        } else {
                            return data.humanReadable;
                        }
                    }
                },
                {
                    "data": "lastStarted",
                    "render": Helpers.getLocalTimeDataTables
                }
            ],
            language: {
                "lengthMenu": "Show: _MENU_",
                "paginate": {
                    "first": `<i class="bi-chevron-double-left"></i>`,
                    "previous": `<i class="bi-chevron-left"></i>`,
                    "next": `<i class="bi-chevron-right"></i>`,
                    "last": `<i class="bi-chevron-double-right"></i>`
                },
                "emptyTable": "No studies yet"
            },
            "drawCallback": function( settings ) {
                Helpers.activateTooltips('#studyManagerTable');
                Helpers.activatePopovers('#studyManagerTable');
                $("#studyManagerTable_wrapper .dt-length select").removeClass("form-select-sm");
                $("#studyManagerTable_wrapper .dt-search input").removeClass("form-control-sm");
            }
        });
    });

    $('#studyManagerTable').on('click', '.active-study input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const isActive = $(checkbox).is(':checked');
        const tr = $(this).closest('tr');
        const studyInfo = dataTable.row(tr).data();
        $.ajax({
            url : window.routes.Api.updateStudy(studyInfo.id),
            type: "PATCH",
            contentType: "application/json",
            data: JSON.stringify({ "active": isActive }),
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: () => {
                $(checkbox).prop('checked', isActive);
                studyInfo.active = isActive;
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't toggle study activation")
        });
    });

    $('#studyManagerTable').on('click', '.study-assets-size', function() {
        const button = this;
        const tr = $(button).closest('tr');
        const studyInfo = dataTable.row(tr).data();
        $.ajax({
            url : window.routes.Admin.studyAssetsSize(studyInfo.id),
            success: function(response) {
                $(button).parent().text(response.humanReadable);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't get study assets size")
        });
    });

    $('#studyManagerTable').on('click', '.result-data-size', function() {
        const button = this;
        const tr = $(button).closest('tr');
        const studyInfo = dataTable.row(tr).data();
        $.ajax({
            url : window.routes.Admin.resultDataSize(studyInfo.id),
            success: function(response) {
                $(button).parent().text(response.humanReadable);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't get result data size")
        });
    });

    $('#studyManagerTable').on('click', '.result-file-size', function() {
        const button = this;
        const tr = $(button).closest('tr');
        const studyInfo = dataTable.row(tr).data();
        $.ajax({
            url : window.routes.Admin.resultFileSize(studyInfo.id),
            success: function(response) {
                $(button).parent().text(response.humanReadable);
            },
            error: (err) => err.responseText ? Alerts.error(err.responseText) : Alerts.error("Couldn't result file size")
        });
    });

</script>
}