@(loggedInUser: common.User, study: common.Study, request: Http.Request)

<!-- Template worker setup -->
<div id="workerSetupTemplate" class="panel-group workerSetupItem" role="tablist" style="display: none">
    <div class="jatosWorkerSetup panel panel-default">
        <div class="panel-heading">
             <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.JatosWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="This worker belongs to a JATOS user. Jatos workers can run any study as many times as they want. Usually used during development.">
                    <span class="glyphicon glyphicon-jatos"></span>
                    <span role="button">&nbsp;@common.workers.JatosWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.JatosWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.JatosWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th>Username</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of the last study started by this worker">Last Study State</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="personalSingleWorkerSetup panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.PersonalSingleWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="This worker can run a study only once. Typically used to distribute amongst participants that you contact individually. Each link can be personalized with the comments.">
                    <span class="glyphicon glyphicon-personal-single"></span>
                    <span role="button">&nbsp;@common.workers.PersonalSingleWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker getLinksButton" data-toggle="tooltip"
                    data-placement="bottom" title="Get links for a Personal Single workers">
                    Get Links
                    <span class="glyphicon glyphicon-link"></span>
                </button>
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.PersonalSingleWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.PersonalSingleWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="Comment given during creation of worker">Comment</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of the study">Study State</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="personalMultipleWorkerSetup panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.PersonalMultipleWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="This worker can run a study multiple times. Typically used to distribute amongst your pilot workers. Each link can be personalized with the comments.">
                    <span class="glyphicon glyphicon-personal-multiple"></span>
                    <span role="button">&nbsp;@common.workers.PersonalMultipleWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker getLinksButton" data-toggle="tooltip"
                    data-placement="bottom" title="Get links for Personal Multiple Workers">
                    Get Links
                    <span class="glyphicon glyphicon-link"></span>
                </button>
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.PersonalMultipleWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.PersonalMultipleWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="Comment given during creation of worker">Comment</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of the last study started by this worker">Last Study State</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="generalSingleWorkerSetup panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.GeneralSingleWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="This worker is created by using the General Single link. Each use of this link creates a new General Single worker. This link can be used only once in each browser. Typically used to distribute in a mailing list or posting in social media.">
                    <span class="glyphicon glyphicon-general-single"></span>
                    <span role="button">&nbsp;@common.workers.GeneralSingleWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker linkButton" data-toggle="tooltip"
                    data-placement="bottom" title="Get the link for General Single Workers">
                    Get Link
                    <span class="glyphicon glyphicon-link"></span>
                </button>
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.GeneralSingleWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.GeneralSingleWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of the study">Study State</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="generalMultipleWorkerSetup panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.GeneralMultipleWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="This worker is created by using the General Multiple link. Each use of this link creates a new General Multiple worker. This link can be used many times. Typically used to distribute in a mailing list or posting in social media.">
                    <span class="glyphicon glyphicon-general-multiple"></span>
                    <span role="button">&nbsp;@common.workers.GeneralMultipleWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker linkButton" data-toggle="tooltip"
                    data-placement="bottom" title="Get the link for General Multiple Workers">
                    Get Link
                    <span class="glyphicon glyphicon-link"></span>
                </button>
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.GeneralMultipleWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.GeneralMultipleWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of the study">Study State</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div class="mtWorkerSetup panel panel-default">
        <div class="panel-heading">
            <span class="panel-title">
                <button type="button" class="collapseWorkerTable btn btn-worker" data-toggle="tooltip"
                    data-placement="bottom" title="Show/hide all @common.workers.MTWorker.UI_WORKER_TYPE workers">
                    <span class="workersBadge badge"></span>&nbsp;
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </button>
                <button type="button" class="btn btn-default activeWorkerButton" data-toggle="tooltip" data-placement="bottom" title="">
                    <span class="glyphicon glyphicon-ok"></span>
                </button>
                <span class="collapseWorkerTable" data-toggle="tooltip" title="MTurk workers are created on the fly when the study is started through Mechanical Turk. MTurk workers can run a study only once.">
                    <span class="glyphicon glyphicon-mturk"></span>
                    <span role="button">&nbsp;@common.workers.MTWorker.UI_WORKER_TYPE Worker</span>
                </span>
            </span>
            <span class="btn-group pull-right">
                <button type="button" class="btn btn-worker mtWorkerSourceCode" data-toggle="tooltip" data-placement="bottom"
                    title="Shows code that has to be copied into the 'source' field of your study's design layout in Mechanical Turk">
                    Source Code
                </button>
                <button type="button" class="btn btn-worker workerResultsButton" data-toggle="tooltip" data-placement="bottom"
                    title="Shows study results only of @common.workers.MTWorker.UI_WORKER_TYPE workers">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch that are done by @common.workers.MTWorker.UI_WORKER_TYPE workers"></span>
                </button>
            </span>
        </div>
        <div class="panel-collapse collapse" role="tabpanel">
            <table class="table workerTable">
                <thead>
                    <tr>
                        <th>Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="ID given by MTurk - not JATOS">MTurk Worker ID</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="MTurk or MTurk Sandbox">Type</th>
                        <th data-toggle="tooltip" data-placement="bottom" title="State of study">Study State</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Get worker link Modal (Personal Single or Personal Multiple) -->
<div id="getWorkerLinksModal" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" class="form-horizontal" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <div class="messages"></div>
                    <p class="modalText"></p>
                    <div class="form-group row">
                        <label class="control-label col-xs-3" for="comment">Comment&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="Use the comment to distinguish the worker(s) from others."></span></label>
                        <div class="col-xs-9">
                            <input class="comment form-control" type="text" placeholder="Comment">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="control-label col-xs-3" for="amount">Amount&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="Enter the number of worker links you want to get."></span></label>
                        <div class="col-xs-3">
                            <input class="amount form-control col-xs-3" type="number" min="1" max="100" value="1">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="confirmed btn btn-worker">Get</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Show Modal with link to run study with a worker -->
<div id="showWorkerLinksModal" class="modal fade" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form class="form-horizontal" role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">Link for Worker</h4>
                </div>
                <div class="modal-body">
                    <!-- Filled dynamically -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-default runButton" data-dismiss="modal">Run</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>

// Max length of each worker table before pagination kicks in
var paginationLength = 10;

function generateWorkerSetupDiv(batch) {
    var workerSetupDiv = $('#workerSetupTemplate').clone().show();
    $(workerSetupDiv).removeAttr('id');

    var workerTables = {};
    workerTables.jatos = initWorkerTable(workerSetupDiv, '.jatosWorkerSetup');
    workerTables.personalSingle = initWorkerTable(workerSetupDiv, '.personalSingleWorkerSetup');
    workerTables.personalMultiple = initWorkerTable(workerSetupDiv, '.personalMultipleWorkerSetup');
    workerTables.generalSingle = initWorkerTable(workerSetupDiv, '.generalSingleWorkerSetup');
    workerTables.generalMultiple = initWorkerTable(workerSetupDiv, '.generalMultipleWorkerSetup');
    workerTables.mt = initWorkerTable(workerSetupDiv, '.mtWorkerSetup');

    $(workerSetupDiv).data('workerTables', workerTables);

    loadWorkers(batch.id, workerSetupDiv);

    return workerSetupDiv;
}

function initWorkerTable(workerSetupDiv, workerSetupClass) {
    var tableElement = $(workerSetupDiv).find(workerSetupClass + ' .workerTable');
    return $(tableElement).DataTable({
        "pageLength": paginationLength,
        "dom": 'tp',
        "columnDefs": [
            {
                "targets": "_all",
                "sorting": false,
                "searchable": false,
                "orderable": false
            },
            {
                "targets": [0],
                "sorting": false,
                "searchable": false,
                "orderable": false,
                "render": function( data, type, row ) {
                    return '<a href="@{general.common.Common.getPlayHttpContext()}jatos/worker/' + data + '/results">' + data + '</a>';
                }
            }
        ],
        "pageLength": 10,
        "pagingType": "simple_numbers",
        "lengthChange": false,
        "info": false,
        "order" : [],
        "language": {
            "emptyTable": "No workers yet"
        }
    });
}

function loadWorkers(batchId, workerSetupDiv) {
    $.ajax({
        type: 'GET',
        url: "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batchId + "/workerSetupData",
        success: function(workerSetupData) {
            fillWorkerSetup(workerSetupData, workerSetupDiv);
        },
        error: function(response) {
            showError("Couldn't load workers.");
        }
    });
}

function fillWorkerSetup(workerSetupData, workerSetupDiv) {
    var workerTables = $(workerSetupDiv).data('workerTables');

    $.each(workerTables, function(index, table) {
        table.clear();
    });

    fillWorkerTables(workerSetupData.allWorkers, workerTables);

    $.each(workerTables, function(index, table) {
        table.order([0, 'asc']).draw();
    });

    toggleTablePagination(".jatosWorkerSetup");
    toggleTablePagination(".personalSingleWorkerSetup");
    toggleTablePagination(".personalMultipleWorkerSetup");
    toggleTablePagination(".generalSingleWorkerSetup");
    toggleTablePagination(".generalMultipleWorkerSetup");
    toggleTablePagination(".mtWorkerSetup");

    setAllowedWorkerTypes(workerSetupDiv, workerSetupData.allowedWorkerTypes);

    addWorkersBadges(workerSetupDiv, workerTables);
    // Set batch's worker badge
    $(workerSetupDiv).closest('.batchItem').find('.batchWorkersBadge').text(workerSetupData.allWorkers.length);

    addWorkerResultsBadges(workerSetupDiv, workerSetupData.studyResultCountsPerWorker);

    setButtonWidthToMax(".workerSetupItem button.collapseWorkerTable");
    setButtonWidthToMax(".workerSetupItem .workerResultsButton");
}

function toggleTablePagination(tableElement) {
    var numOfTr = $(tableElement + " .workerTable").find('tbody tr').length;
    var hidePaging = numOfTr < paginationLength;
    $(tableElement + " .dataTables_paginate").toggle(!hidePaging);
}

function setAllowedWorkerTypes(workerSetupDiv, allowedWorkerTypes) {
    // First clear all allowed worker types
    $(workerSetupDiv).find(".activeWorkerButton").each(function(index) {
        toggleWorkerTypeButton($(this), false);
    });
    // Now set the allowed ones
    $.each(allowedWorkerTypes, function(index, workerType) {
        var button;
        switch (workerType) {
        case '@common.workers.JatosWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".jatosWorkerSetup .activeWorkerButton");
            break;
        case '@common.workers.PersonalSingleWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".personalSingleWorkerSetup .activeWorkerButton");
            break;
        case '@common.workers.PersonalMultipleWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".personalMultipleWorkerSetup .activeWorkerButton");
            break;
        case '@common.workers.GeneralSingleWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".generalSingleWorkerSetup .activeWorkerButton");
            break;
        case '@common.workers.GeneralMultipleWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".generalMultipleWorkerSetup .activeWorkerButton");
            break;
        case '@common.workers.MTWorker.WORKER_TYPE':
            button = $(workerSetupDiv).find(".mtWorkerSetup .activeWorkerButton");
            break;
        }
        if (button) {
            toggleWorkerTypeButton(button, true);
        }
    });
}

function toggleWorkerTypeButton(button, active) {
    if (active) {
        button.addClass('allowedWorkerType');
        button.removeClass('btn-default');
        button.addClass('btn-worker');
        button.attr('title', "Click to forbid this worker type");
        $(button).find('.glyphicon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
    } else {
        button.removeClass('allowedWorkerType');
        button.removeClass('btn-worker');
        button.addClass('btn-default');
        button.attr('title', "Click to allow this worker type");
        $(button).find('.glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
    }
}

function addWorkersBadges(workerSetupDiv, workerTables) {
    var rowCount = workerTables.jatos.data().length;
    $(workerSetupDiv).find('.jatosWorkerSetup .workersBadge').text(rowCount);
    rowCount = workerTables.personalSingle.data().length;
    $(workerSetupDiv).find('.personalSingleWorkerSetup .workersBadge').text(rowCount);
    rowCount = workerTables.personalMultiple.data().length;
    $(workerSetupDiv).find('.personalMultipleWorkerSetup .workersBadge').text(rowCount);
    rowCount = workerTables.generalSingle.data().length;
    $(workerSetupDiv).find('.generalSingleWorkerSetup .workersBadge').text(rowCount);
    rowCount = workerTables.generalMultiple.data().length;
    $(workerSetupDiv).find('.generalMultipleWorkerSetup .workersBadge').text(rowCount);
    rowCount = workerTables.mt.data().length;
    $(workerSetupDiv).find('.mtWorkerSetup .workersBadge').text(rowCount);
}


function addWorkerResultsBadges(workerSetupDiv, studyResultCountsPerWorker) {
    var resultCount = studyResultCountsPerWorker['@common.workers.JatosWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.jatosWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
    resultCount = studyResultCountsPerWorker['@common.workers.PersonalSingleWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.personalSingleWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
    resultCount = studyResultCountsPerWorker['@common.workers.PersonalMultipleWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.personalMultipleWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
    resultCount = studyResultCountsPerWorker['@common.workers.GeneralSingleWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.generalSingleWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
    resultCount = studyResultCountsPerWorker['@common.workers.GeneralMultipleWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.generalMultipleWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
    resultCount = studyResultCountsPerWorker['@common.workers.MTWorker.WORKER_TYPE'] + studyResultCountsPerWorker['@common.workers.MTSandboxWorker.WORKER_TYPE'];
    $(workerSetupDiv).find('.mtWorkerSetup .workerResultsButton .resultsBadge').text(resultCount);
}

function fillWorkerTables(allWorkers, workerTables) {
    $.each(allWorkers, function(index, worker) {
        switch (worker.workerType) {
        case '@common.workers.JatosWorker.WORKER_TYPE':
            fillJatosRow(worker, workerTables.jatos);
            break;
        case '@common.workers.PersonalSingleWorker.WORKER_TYPE':
            fillPersonalSingleRow(worker, workerTables.personalSingle);
            break;
        case '@common.workers.PersonalMultipleWorker.WORKER_TYPE':
            fillPersonalMultipleRow(worker, workerTables.personalMultiple);
            break;
        case '@common.workers.GeneralSingleWorker.WORKER_TYPE':
            fillGeneralSingleRow(worker, workerTables.generalSingle);
            break;
        case '@common.workers.GeneralMultipleWorker.WORKER_TYPE':
            fillGeneralMultipleRow(worker, workerTables.generalMultiple);
            break;
        case '@common.workers.MTWorker.WORKER_TYPE':
        case '@common.workers.MTSandboxWorker.WORKER_TYPE':
            fillMtRow(worker, workerTables.mt);
            break;
        }
    });
}

function fillJatosRow(worker, jatosWorkerTable) {
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    if ("@loggedInUser.getUsername()" == worker.username) {
        jatosWorkerTable.row.add([
            worker.id,
            worker.username,
            lastStudyState,
            '<button type="button" class="btn btn-worker runButton">Run</button>'
        ]);
    } else {
        jatosWorkerTable.row.add([
            worker.id,
            worker.username,
            lastStudyState,
            ''
        ]);
    }
}

function fillPersonalSingleRow(worker, personalSingleWorkerTable) {
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    personalSingleWorkerTable.row.add([
        worker.id,
        worker.comment,
        lastStudyState,
        '<button type="button" class="btn btn-worker linkButton">Get Link <span class="glyphicon glyphicon-link"></span></button>'
    ]);
}

function fillPersonalMultipleRow(worker, personalMultipleWorkerTable) {
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    personalMultipleWorkerTable.row.add([
        worker.id,
        worker.comment,
        lastStudyState,
        '<button type="button" class="btn btn-worker linkButton">Get Link <span class="glyphicon glyphicon-link"></span></button>'
    ]);
}

function fillGeneralSingleRow(worker, generalSingleWorkerTable) {
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    generalSingleWorkerTable.row.add([
        worker.id,
        lastStudyState
    ]);
}

function fillGeneralMultipleRow(worker, generalMultipleWorkerTable) {
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    generalMultipleWorkerTable.row.add([
        worker.id,
        lastStudyState
    ]);
}

function fillMtRow(worker, mtWorkerTable) {
    var workerType = getUIWorkerTypeWithGlyphicon(worker.workerType);
    var lastStudyState = worker.lastStudyState ? worker.lastStudyState : "none started yet";
    mtWorkerTable.row.add([
        worker.id,
        worker.mtWorkerId,
        workerType,
        lastStudyState
    ]);
}

$('#batchList').on('click', '.collapseWorkerTable', function() {
    var collapse = $(this).closest('.panel').find('.panel-collapse:first').collapse('toggle');
    $(this).find('.glyphicon-chevron-down, .glyphicon-chevron-right')
        .toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
});

$('#batchList').on('click', '.activeWorkerButton', function() {
    var workerType = getWorkerTypeFromPanel(this);
    var allow = $(this).hasClass('allowedWorkerType');
    var batch = getBatchData(this);
    var workerSetupDiv = $(this).closest('.workerSetupItem');
    $.ajax({
        url : "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batch.id
                + "/properties/workerType/" + workerType + "?allow=" + !allow,
        type : "POST",
        success: function(allowedWorkerTypes) {
            setAllowedWorkerTypes(workerSetupDiv, allowedWorkerTypes);
        },
        error : function(err) {
            showError("Couldn't change worker type activation.");
        }
    });
});

function getWorkerTypeFromPanel(panelElem) {
    if ($(panelElem).closest('.panel').is('.jatosWorkerSetup')) {
        return "@common.workers.JatosWorker.WORKER_TYPE";
    } else if ($(panelElem).closest('.panel').is('.personalSingleWorkerSetup')) {
        return "@common.workers.PersonalSingleWorker.WORKER_TYPE";
    } else if ($(panelElem).closest('.panel').is('.personalMultipleWorkerSetup')) {
        return "@common.workers.PersonalMultipleWorker.WORKER_TYPE";
    } else if ($(panelElem).closest('.panel').is('.generalSingleWorkerSetup')) {
        return "@common.workers.GeneralSingleWorker.WORKER_TYPE";
    } else if ($(panelElem).closest('.panel').is('.generalMultipleWorkerSetup')) {
            return "@common.workers.GeneralMultipleWorker.WORKER_TYPE";
    } else if ($(panelElem).closest('.panel').is('.mtWorkerSetup')) {
        return "@common.workers.MTWorker.WORKER_TYPE";
    }
}

$('#batchList').on('click', '.workerResultsButton', function() {
    var workerType = getWorkerTypeFromPanel(this);
    var batch = getBatchData(this);
    if (workerType) {
        window.location.href =  "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batch.id
            + "/results?workerType=" + workerType;
    }
});

$('#batchList').on('click', '.personalSingleWorkerSetup .getLinksButton', function(e) {
    var batch = getBatchData(this);
    var workerSetupDiv = $(this).closest('.workerSetupItem');
    showGetWorkerLinksPersonalSingleModal(batch, workerSetupDiv);
});

function showGetWorkerLinksPersonalSingleModal(batch, workerSetupDiv) {
    var text = "Use a comment to distinguish these workers from others.";
    var title = "Get links for Personal Single workers in batch '" + batch.title + "'";
    showGetWorkerLinksModal(title, text);
    $('#getWorkerLinksModal').off('click.confirm').on('click.confirm', '.confirmed', function() {
        $('#getWorkerLinksModal').modal('hide');
        var url = "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batch.id + "/personalSingleRun";
        postGetWorkerLinksPersonal(url, showShowWorkerLinksPersonalSingleModal, batch, workerSetupDiv);
    });
}

$('#batchList').on('click', '.personalMultipleWorkerSetup .getLinksButton', function() {
    var batch = getBatchData(this);
    var workerSetupDiv = $(this).closest('.workerSetupItem');
    showGetWorkerLinksPersonalMultipleModal(batch, workerSetupDiv);
});

function showGetWorkerLinksPersonalMultipleModal(batch, workerSetupDiv) {
    var text = "Use a comment to distinguish these workers from others.";
    var title = "Get links for Personal Multiple workers in batch '" + batch.title + "'";
    showGetWorkerLinksModal(title, text);
    $('#getWorkerLinksModal').off('click.confirm').on('click.confirm', '.confirmed', function() {
        $('#getWorkerLinksModal').modal('hide');
        var url = "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batch.id + "/personalMultipleRun";
        postGetWorkerLinksPersonal(url, showShowWorkerLinksPersonalMultipleModal, batch, workerSetupDiv);
    });
}

function showGetWorkerLinksModal(title, text) {
    $('#getWorkerLinksModal').find('.modal-title').html(title);
    $('#getWorkerLinksModal').find('.modalText').html(text);
    $('#getWorkerLinksModal').find('.comment').val("");
    $('#getWorkerLinksModal').find('.amount').val(1);
    // Focus on comment input field in modal
    $('#getWorkerLinksModal').on('shown.bs.modal', function () {
        $('#getWorkerLinksModal').find('.comment').focus();
    })
    $('#getWorkerLinksModal').modal('show');
}

function postGetWorkerLinksPersonal(url, showWorkerLinksModal, batch, workerSetupDiv) {
    var jsonData = {};
    jsonData['comment'] = $('#getWorkerLinksModal').find('.comment').val();
    jsonData['amount'] = $('#getWorkerLinksModal').find('.amount').val();
    $.ajax({
        type: 'POST',
        url: url,
        contentType: "application/json; charset=utf-8",
        dataType: 'text',
        data: JSON.stringify(jsonData),
        success: function(workerIds) {
            if (workerSetupDiv.length > 0) loadWorkers(batch.id, workerSetupDiv);
            showWorkerLinksModal($.parseJSON(workerIds), batch);
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
}

$('#batchList').on('click', '.personalSingleWorkerSetup .linkButton', function() {
    var workerSetupDiv = $(this).closest('.workerSetupItem');
    var workerTables = $(workerSetupDiv).data('workerTables');
    var tr = $(this).closest('tr');
    var rowData = workerTables.personalSingle.row(tr).data();
    var workerId = rowData[0];
    var workerIds = [workerId];
    var batch = getBatchData(this);
    showShowWorkerLinksPersonalSingleModal(workerIds, batch);
});

function showShowWorkerLinksPersonalSingleModal(workerIds, batch) {
    var title = "Links for Personal Single workers in batch '" + batch.title + "'";
    var urls = [];
    $.each(workerIds, function(i, workerId) {
        urls.push("@utils.common.Helpers.getRealBaseUrl(request)publix/@study.getId()/start?"
            + "batchId=" + batch.id + "&personalSingleWorkerId=" + workerId);
    });
    var showRunButton = (urls.length == 1
            && batch.allowedWorkerTypes.includes("@common.workers.PersonalSingleWorker.WORKER_TYPE"));
    var preText, postText;
    if (showRunButton) {
        preText = "This URL will start the run.";
        postText = "Copy & paste and hand it to your worker - or press 'Run' to start it right away.";
    } else {
        preText = "Each of these URLs will start a run.";
        postText = "Copy & paste and hand them to your workers.";
    }
    showShowWorkerLinksModal(title, preText, urls, true, postText, showRunButton);
}

$('#batchList').on('click', '.personalMultipleWorkerSetup .linkButton', function() {
    var workerSetupDiv = $(this).closest('.workerSetupItem');
    var workerTables = $(workerSetupDiv).data('workerTables');
    var tr = $(this).closest('tr');
    var rowData = workerTables.personalMultiple.row(tr).data();
    var workerId = rowData[0];
    var workerIds = [workerId];
    var batch = getBatchData(this);
    showShowWorkerLinksPersonalMultipleModal(workerIds, batch);
});

function showShowWorkerLinksPersonalMultipleModal(workerIds, batch) {
    var title = "Links for Personal Multiple workers in batch '" + batch.title + "'";
    var urls = [];
    $.each(workerIds, function(i, workerId) {
        urls.push("@utils.common.Helpers.getRealBaseUrl(request)publix/@study.getId()/start?"
            + "batchId=" + batch.id + "&personalMultipleWorkerId=" + workerId);
    });
    var showRunButton = (urls.length == 1
            && batch.allowedWorkerTypes.includes("@common.workers.PersonalMultipleWorker.WORKER_TYPE"));
    var preText, postText;
    if (showRunButton) {
        preText = "This URL will start the run.";
        postText = "Copy & paste and hand it to your worker - or press 'Run' to start it right away.";
    } else {
        preText = "Each of these URLs will start a run.";
        postText = "Copy & paste and hand them to your workers.";
    }
    showShowWorkerLinksModal(title, preText, urls, false, postText, showRunButton);
}

$('#batchList').on('click', '.generalSingleWorkerSetup .linkButton', function() {
    var batch = getBatchData(this);
    showShowWorkerLinksGeneralSingleModal(batch);
});

$('#batchList').on('click', '.generalMultipleWorkerSetup .linkButton', function() {
    var batch = getBatchData(this);
    showShowWorkerLinksGeneralMultipleModal(batch);
});

function showShowWorkerLinksGeneralSingleModal(batch) {
    var title = "Link for General Single workers in batch '" + batch.title + "'";
    var url = "@utils.common.Helpers.getRealBaseUrl(request)publix/@study.getId()/start?" +
        "batchId=" + batch.id + "&generalSingle";
    var preText = "This URL will start the run.";
    var showRunButton = batch.allowedWorkerTypes.includes("@common.workers.GeneralSingleWorker.WORKER_TYPE");
    var postText;
    if (showRunButton) {
        postText = "Copy & paste and hand it to your workers - or press 'Run' to start it right away.";
    } else {
        postText = "Copy & paste and hand it to your workers.";
    }
    showShowWorkerLinksModal(title, preText, [url], true, postText, showRunButton);
}

function showShowWorkerLinksGeneralMultipleModal(batch) {
    var title = "Link for General Multiple workers in batch '" + batch.title + "'";
    var url = "@utils.common.Helpers.getRealBaseUrl(request)publix/@study.getId()/start?" +
        "batchId=" + batch.id + "&generalMultiple";
    var preText = "This URL will start the run.";
    var showRunButton = batch.allowedWorkerTypes.includes("@common.workers.GeneralMultipleWorker.WORKER_TYPE");
    var postText;
    if (showRunButton) {
        postText = "Copy & paste and hand it to your workers - or press 'Run' to start it right away.";
    } else {
        postText = "Copy & paste and hand it to your workers.";
    }
    showShowWorkerLinksModal(title, preText, [url], false, postText, showRunButton);
}

function showShowWorkerLinksModal(title, preText, urls, preCheckbox, postText, showRunButton) {
    var htmlPreText = '<p>' + preText + '</p>';
    var htmlUrl = '<div class="well linkUrls">' + generateHtmlUrlList(urls) + '</div>';
    var htmlPreCheckbox = '<div class="checkbox"><p><label><input class="preCheckbox" type="checkbox">Allow preview&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="Workers can use a \'pre\' link multiple times as long as they don\'t get past the first active component."></span></label></p></div>'
    var htmlPostText = '<p>' + postText + '</p>';
    var htmlBody;
    if (preCheckbox) {
        htmlBody = htmlPreText + htmlUrl + htmlPreCheckbox + htmlPostText;
    } else {
        htmlBody = htmlPreText + htmlUrl + htmlPostText;
    }
    if (showRunButton) {
        $('#showWorkerLinksModal').find('.runButton').show();
    } else {
        $('#showWorkerLinksModal').find('.runButton').hide();
    }
    $('#showWorkerLinksModal').find('.modal-title').text(title);
    $('#showWorkerLinksModal').find('.modal-body').html(htmlBody);
    $('#showWorkerLinksModal').find('.linkUrls').data("linkUrls", urls);
    $('#showWorkerLinksModal').modal('show');
}

function generateHtmlUrlList(urls) {
    var html = '<ul class="list-unstyled">';
    $.each(urls, function(i, url) {
        html += '<li>' + url + '</li>';
    });
    html += '</ul>';
    return html;
}

$('#showWorkerLinksModal').on('click', '.runButton', function() {
    // The run button is only shown if there is only one link in the list
    // The we can safely assume that we have only one link here
    var url = $('#showWorkerLinksModal .linkUrls').text();
    window.open(url);
});

$('#showWorkerLinksModal').on('click', '.preCheckbox', function(e) {
    var urls = $('#showWorkerLinksModal').find('.linkUrls').data("linkUrls");
    var checkbox = $('#showWorkerLinksModal input');
    var newUrls = [];
    $.each(urls, function(i, url) {
        if (checkbox.prop("checked")) {
            newUrls.push(url + "&pre");
        } else {
            newUrls.push(url);
        }
    });
    var htmlLinkList = generateHtmlUrlList(newUrls);
    $('#showWorkerLinksModal').find('.linkUrls').html(htmlLinkList);
});

$('#batchList').on('click', '.jatosWorkerSetup .runButton', function() {
    var batch = getBatchData(this);
    window.open("@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/run?batchId=" + batch.id);
});

</script>