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

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

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

    @* Toolbar *@
    <div class="d-flex gap-1 mb-4" id="studyLinksToolbar">
        <button class="btn btn-batch" type="button" data-bs-toggle="modal" data-bs-target="#batchCreatorModal" data-bs-tooltip="Add a new batch of workers">
            <i class="bi-plus-lg fw-bold"></i><span class="d-none d-sm-inline ps-1">New Batch</span>
        </button>
        <button class="btn btn-batch" type="button" data-bs-toggle="modal" data-bs-target="#studyLinksCreatorAllTypesModal" data-bs-tooltip="Shortcut to get study links. You can choose the batch and link type. Study links are meant to be distributed to your workers so they can run the study.">
            <i class="bi-link-45deg"></i><span class="d-none d-sm-inline ps-1">Get Study Links</span>
        </button>
    </div>

    @* Batch Table *@
    <table class="table table-hover align-middle w-100" id="batchTable">
        <thead>
        <tr>
            <th></th>
            <th class="no-info-icon" data-bs-tooltip="Activate / inactivate batches - study links from inactivated batches won't run">Active<span class="info-icon"></span><span class="ordering-icon"></span></th>
            <th class="no-info-icon" data-bs-tooltip="ID of this batch">ID<span class="info-icon"></span><span class="ordering-icon"></span></th>
            <th class="no-info-icon" data-bs-tooltip="Title of this batch">Batch title<span class="info-icon"></span><span class="ordering-icon"></span></th>
            <th></th>
        </tr>
        </thead>
    </table>

    @* Template for button toolbar in batch's row *@
    <div class="d-none" id="batchToolbarTemplate" >
        <div class="float-end text-nowrap">
            <button class="batch-properties btn btn-batch" type="button" data-bs-tooltip="Change this batch's properties">
                <i class="bi-gear-fill"></i><span class="d-none d-xl-inline ps-1">Properties</span>
            </button>
            <button class="batch-session btn btn-batch" type="button" data-bs-tooltip="Open and edit this batch's session data">
                <i class="bi-list-columns-reverse"></i><span class="d-none d-xl-inline ps-1">Batch Session Data</span>
            </button>
            <button class="groups btn btn-batch" type="button" data-bs-tooltip="Show all groups of this batch">
                <i class="bi-people-fill"></i><span class="d-none d-xl-inline ps-1">Groups</span>
                <span class="badge text-batch bg-white rounded-pill ms-1"></span>
            </button>
            <button class="batch-results btn btn-batch" type="button" data-bs-tooltip="Show only the study results that belong to this batch">
                Results<span class="badge text-batch bg-white rounded-pill no-info-icon ms-1"></span>
            </button>
            <div class="btn-group" role="group">
                <button class="btn btn-batch dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}'>
                    <i class="bi-three-dots-vertical d-lg-none"></i><span class="d-none d-xl-inline ps-1">More</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-batch">
                    <li class="no-info-icon" data-bs-tooltip="Delete this batch">
                        <a class="dropdown-item remove-batch" href="#"><i class="bi-x-circle-fill pe-1"></i>Delete</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    @views.html.gui.studyLinks.batchCreator()
    @views.html.gui.studyLinks.batchPropertiesModal()
    @views.html.gui.studyLinks.sessionModal()
    @views.html.gui.studyLinks.groupsModal()
    @views.html.gui.studyLinks.studyLinksSetup()
    @views.html.gui.studyLinks.studyLinksManager()
    @views.html.gui.studyLinks.qrCodeModal()
    @views.html.gui.studyLinks.studyLinksCreator()
    @views.html.gui.studyLinks.studyLinksCreatorAllTypesModal()
    @views.html.gui.studyLinks.mTurkSourceCodeModal()
</main>

<script @{helper.CSPNonce.attr} type="module">
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.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")";

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

    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.");

    let batchTable;
    $(document).ready(function() {
        batchTable = $('#batchTable').DataTable({
            "ajax": {
                "url" : window.routes.StudyLinks.batchesByStudy(window.study.id),
                "error": () => Alerts.error("Error reading result data")
            },
            "dom": 't',
            "pageLength": 100,
            "order": [[ 2, "asc" ]],
            "scrollX": true,
            "rowId": 'id',
            "columns": [
                {
                    "class": 'details-control',
                    "data": null,
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        return `<button type="button" class="btn btn-batch text-nowrap collapse-study-links-setup dropdown-toggle px-3"
                            data-bs-tooltip="Open/close this batch"></button>`;
                    }
                },
                {
                    "className": 'batch-active',
                    "data": "active",
                    "orderable": true,
                    "render": function (data, type, full, meta) {
                        if (type === 'export' || type === 'sort') return data.toString();
                        return `
                            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this batch. In a deactivated batch study links belonging to this batch will not run.">
                                <input type="checkbox" ${data ? "checked" : ""}>
                                <span class="slider slider-batch round"></span>
                            </label>
                        `;
                    }
                },
                {
                    "className": "batch-id",
                    "data": "id",
                    "type": "num",
                    "orderable": true
                },
                {
                    "className": "batch-title",
                    "data": "title",
                    "orderable": true
                },
                {
                    "class": "toolbar",
                    "data": null,
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        const toolbar = $('#batchToolbarTemplate').clone().show();
                        $(toolbar).find('.groups .badge').text(data.groupCount);
                        const tooltipGroups = data.groupCount > 0
                                ? `This batch has ${data.groupCount} group(s) so far. Click here to manage them.`
                                : "This batch has no groups yet.";
                        $(toolbar).find('.groups').attr("data-bs-tooltip", tooltipGroups);
                        $(toolbar).find('.batch-results .badge').text(data.resultCount);
                        const tooltipResults = data.resultCount > 0
                                ? `This batch has ${data.resultCount} result(s) so far. Click here to go to a result page that only shows the study results of this batch.`
                                : "This batch has no results yet.";
                        $(toolbar).find('.batch-results').attr("data-bs-tooltip", tooltipResults);
                        return toolbar.html();
                    }
                }
            ],
            "createdRow": function(row, data, index) {
                $(row).addClass("batch-row");
                if (!window.study.isGroupStudy) {
                    $(row).find('.groups').attr('disabled', true);
                }
            },
            "drawCallback": function( settings ) {
                Helpers.setButtonWidthToMax("#batchTable .batch-results");
                Helpers.setButtonWidthToMax("#batchTable .groups");
                Helpers.activateTooltips('#batchTable_wrapper');
            },
            "initComplete": function( settings, json ) {
                $(".collapse-study-links-setup")[0].click(); // Automatically open the first batch
            }
        });
    });

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

    $('#batchTable').on('click', '.batch-results', function() {
        const batch = Helpers.getDataFromDataTableRow(batchTable, this);
        window.location.href = window.routes.StudyResults.batchesStudyResults(window.study.id, batch.id, "null");
    });

    $('#batchTable').on('click', '.remove-batch', function() {
        const batch = Helpers.getDataFromDataTableRow(batchTable, this);
        const title = "Confirm deletion of a batch";
        const htmlText = `<p>You are about to delete the batch "<b>${batch.title}" (ID ${batch.id}) with all its results</b>.</p>
            <p><b class="text-danger">This cannot be undone.</b></p>`;
        const action = () => {
            $.ajax({
                url : window.routes.StudyLinks.removeBatch(window.study.id, batch.id),
                type : 'DELETE',
                headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                beforeSend: WaitingModal.show,
                success : function(result) {
                    Alerts.showList(JSON.parse(result));
                    batchTable.ajax.reload();
                },
                error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Couldn't delete batch"),
                complete: WaitingModal.hide
            });
        };
        ConfirmationModal.show({ title: title, text: htmlText, btnText: 'Delete', safetyCheck: true, action: action });
    });

</script>

}