@(loggedInUser: common.User, breadcrumbs: String, localhost: Boolean, study: common.Study,
    allWorkersSize: Integer, request: Http.Request)

@views.html.gui.main(loggedInUser, breadcrumbs, localhost){

<button id="createBatchButton" type="button" class="btn btn-batch" data-toggle="tooltip"
    data-placement="bottom" title="Create a new batch of workers">
    <span class="glyphicon glyphicon-plus"></span>
    New Batch
</button>
<div class="btn-group">
    <button id="getWorkerLinksGeneralButton" type="button" class="btn btn-worker" data-toggle="tooltip"
        data-placement="bottom" title="Get run links for workers (you can choose which batch and worker type)">
        Get Worker Links
        <span class="glyphicon glyphicon-link"></span>
    </button>
    <button id="allWorkersButton" type="button" class="btn btn-worker" data-toggle="tooltip"
        data-placement="bottom" title="Show workers of all batches">
        All Workers
        <span class="badge" data-toggle="tooltip" data-placement="bottom" title="Number of workers in all batches together">
        @allWorkersSize
        </span>
    </button>
</div>

<!-- Create Batch Modal -->
<div class="modal fade" id="createBatchModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="createBatchForm" 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">Create Batch</h4>
                </div>
                <div class="modal-body">
                    <div class="messages"></div>
                    <div class="form-group">
                        <label class="control-label col-xs-3"
                            for="@models.gui.BatchProperties.TITLE">Title</label>
                        <div class="col-xs-9">
                            <input type="text"
                                class="form-control @models.gui.BatchProperties.TITLE"
                                id="@models.gui.BatchProperties.TITLE"
                                name="@models.gui.BatchProperties.TITLE"
                                placeholder="Your batch title" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <input type="submit" class="confirmed btn btn-batch"
                        value="Create">
                </div>
            </form>
        </div>
    </div>
</div>


<div id="batchList" class="panel-group" role="tablist">
</div>

<!-- Template batch -->
<div id="batchTemplate" class="panel panel-default" style="display: none">
    <div class="panel-heading">
        <span class="panel-title">
            <button type="button" class="collapseWorkerSetup btn btn-batch" data-toggle="tooltip"
                data-placement="bottom" title="Open/close worker setup of this batch">
                <span class="batchWorkersBadge badge"></span>&nbsp;
                <span class="glyphicon glyphicon-chevron-right"></span>
            </button>
            <button type="button" class="btn btn-default activeBatchButton" data-toggle="tooltip" data-placement="bottom" title="Activate/deactivate batch ( if deactivated workers cannot run the study in this batch)">
                <span class="glyphicon glyphicon-ok"></span>
            </button>
            <span role="button" class="batchTitle">Batch Title</span>
            <span class="btn-group pull-right">
                <button type="button" class="batchRefreshButton btn btn-batch" data-toggle="tooltip" data-placement="bottom"
                    title="Refresh this batch">
                    <span class="glyphicon glyphicon-refresh"></span></button>
                <button type="button" class="batchPropertiesButton btn btn-batch" data-toggle="tooltip" data-placement="bottom"
                    title="Edit this batch's properties">
                    Properties <span class="glyphicon glyphicon-option-vertical"></span></button>
                <button type="button" class="batchSessionButton btn btn-batch" data-toggle="tooltip" data-placement="bottom"
                    title="See and edit this batch's session data">
                    Batch Session Data <span class="glyphicon glyphicon-th-list"></span></button>
                <button type="button" class="batchResultsButton btn btn-batch" data-toggle="tooltip" data-placement="bottom"
                    title="Shows the study results of this batch">
                    Results <span class="resultsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of study results that belong to this batch"></span>
                </button>
                <button type="button" class="groupsButton btn btn-batch" data-toggle="tooltip" data-placement="bottom"
                    title="Shows all groups of this batch">
                    Groups <span class="groupsBadge badge" data-toggle="tooltip" data-placement="bottom"
                    title="Number of groups that belong to this batch"></span>
                </button>
                <div class="btn-group">
                    <button type="button" class="btn btn-batch dropdown-toggle" data-toggle="dropdown">
                        More <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li data-toggle="tooltip" data-placement="bottom"
                            title="Deletes this batch but doesn't delete any results">
                            <a class="removeBatch" href="#"><span class="glyphicon glyphicon-remove"></span>
                                Delete
                            </a>
                        </li>
                    </ul>
                </div>
            </span>
        </span>
    </div>
    <div class="panel-collapse collapse" role="tabpanel">
    </div>
</div>

@views.html.gui.workerAndBatch.batchPropertiesModal(study)
@views.html.gui.workerAndBatch.getWorkerLinksModal(study)
@views.html.gui.workerAndBatch.workersModal(study)
@views.html.gui.workerAndBatch.groupsModal(study)
@views.html.gui.workerAndBatch.sessionModal(study)
@views.html.gui.workerAndBatch.workerSetup(loggedInUser, study, request)
@views.html.gui.workerAndBatch.mTurkSourceCodeModal(study, request)

<script>

loadBatches();

$('#createBatchButton').click(function(event) {
    removeAlerts("#createBatchModal");
    removeFormErrors("#createBatchModal");
    $('#createBatchModal .@models.gui.BatchProperties.TITLE').val('');
    // Focus on comment input field in modal
    $('#createBatchModal').on('shown.bs.modal', function () {
        $('#createBatchModal').find('.@models.gui.BatchProperties.TITLE').focus();
    })
    $('#createBatchModal').modal('show');
});

$("#createBatchForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: "@controllers.gui.routes.Batches.submitCreated(study.getId())",
        data: $('#createBatchForm').serialize(),
        success: function(response) {
            removeAlerts("#createBatchModal");
            removeFormErrors("#createBatchModal");
            $('#createBatchModal').modal('hide');
            loadBatches();
        },
        error: function(response) {
            removeAlerts("#createBatchModal");
            removeFormErrors("#createBatchModal");
            showWarning("Batch wasn't created", "#createBatchModal .messages");
            if (isJson(response.responseText)) {
                showFormErrors("#createBatchModal", response);
            } else {
                showModalError("#createBatchModal .messages", response);
            }
        }
    });
});

$('#allWorkersButton').click(function(event) {
    removeAlerts("#workersModal");
    generateWorkersTable(false);
    $('#workersModal').modal('show');
});

function loadBatches() {
    $.ajax({
        type: 'GET',
        url: "@controllers.gui.routes.Batches.batchesByStudy(study.getId())",
        success: function(batchList) {
            fillAllBatches(batchList);
        },
        error: function(response) {
            showError("Couldn't load batches.");
        }
    });
}

function fillAllBatches(batchList) {
    $('#batchList').empty();
    $('#batchList').removeData();
    $.each(batchList, function(index, batch) {
        var batchItem = $('#batchTemplate').clone().show();
        $(batchItem).removeAttr('id');
        $(batchItem).addClass('batchItem');
        fillBatch(batchItem, batch);
        $("#batchList").append(batchItem);
    });
    setButtonWidthToMax("#batchList .collapseWorkerSetup");
    setButtonWidthToMax("#batchList .batchResultsButton");
    setButtonWidthToMax("#batchList .groupsButton");
}

function fillBatch(batchItem, batch) {
    // Write batch object into toolbar's data attribute so we can use it later on
    $(batchItem).data(batch);
    setBatchItemActive(batchItem, batch.active);
    $(batchItem).find('.batchTitle').text(batch.title);
    $(batchItem).find('.batchWorkersBadge').text(batch.workerCount);
    $(batchItem).find('.batchResultsButton .resultsBadge').text(batch.resultCount);
    $(batchItem).find('.groupsButton .groupsBadge').text(batch.groupCount);
    if (!@study.isGroupStudy()) {
        $(batchItem).find('.groupsButton').attr('disabled', true);
    }
}

$('#batchList').on('click', '.collapseWorkerSetup, .batchTitle, .batchWorkersBadge', function() {
    var batchItem = $(this).closest('.batchItem');
    var collapse = $(batchItem).find(".panel-collapse:first");
    if ($(collapse).children().length == 0) {
        var batch = getBatchData(this);
        if (!batch) {return} // should never happen
        var workerSetupDiv = generateWorkerSetupDiv(batch);
        $(collapse).append(workerSetupDiv);
    }
    $(collapse).collapse('toggle');
    $(this).find('.glyphicon-chevron-down, .glyphicon-chevron-right')
                    .toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
});

$('#batchList').on('click', '.activeBatchButton', function() {
    var button = this;
    var batch = getBatchData(this);
    if (!batch) {return} // should never happen
    var active = $(this).hasClass('activeBatch');
    $.ajax({
        url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/batch/" + batch.id
                + "/properties/active?active=" + !active,
        type : "POST",
        success: function(active) {
            var batchItem = $(button).closest('.batchItem');
            setBatchItemActive(batchItem, active);
        },
        error : function(err) {
            showError(err.responseText);
        }
    });
});

$('#batchList').on('click', '.batchRefreshButton', function() {
    var batch = getBatchData(this);
    if (!batch) {return} // should never happen

    var batchItem = $(this).closest('.batchItem');
    refreshBatch(batchItem, batch);
    var workerSetupDiv = $(batchItem).find('.workerSetupItem');
    if (workerSetupDiv.length == 0) {return} // might happen if worker setup was never opened
    loadWorkers(batch.id, workerSetupDiv);
});

function refreshBatch(batchItem, batch) {
    $.ajax({
        type: 'GET',
        url: "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/batch/" + batch.id,
        success: function(batch) {
            fillBatch(batchItem, batch);
        },
        error: function(response) {
            showError("Couldn't load batches.");
        }
    });
}

$('#batchList').on('click', '.batchResultsButton', function() {
    var batch = getBatchData(this);
    if (!batch) {return} // should never happen
    window.location.href =  "@{general.common.Common.getPlayHttpContext()}jatos/@study.getId()/batch/" + batch.id + "/results";
});

$('#batchList').on('click', '.groupsButton', function() {
    var batch = getBatchData(this);
    showGroupsModal(batch);
});

function setBatchItemActive(item, active) {
    var button = $(item).find('.activeBatchButton');
    if (active) {
        //item.removeClass("grayout");
        button.addClass('activeBatch');
        button.removeClass('btn-default');
        button.addClass('btn-batch');
        button.attr('title', "Click to deactivate this batch (workers cannot run the study)");
        button.html($(button.html())
                .removeClass('glyphicon-remove')
                .addClass('glyphicon-ok').prop('outerHTML'));
    } else {
        //item.addClass("grayout");
        button.removeClass('activeBatch');
        button.removeClass('btn-batch');
        button.addClass('btn-default');
        button.attr('title', "Click to activate this batch (workers can run the study)");
        button.html($(button.html())
                .removeClass('glyphicon-ok')
                .addClass('glyphicon-remove').prop('outerHTML'));
    }
}

$('#batchList').on('click', '.removeBatch', function() {
    var element = this;
    var batch = getBatchData(this);
    if (!batch) {return} // should never happen
    var title = "Confirm Delete";
    var htmlText = "<p>You are about to delete batch \"" + batch.title
        + "\" (ID " + batch.id + ") <b>with all its results</b>.</p>"
        + "<p><b>This cannot be undone.</b> Do you want to proceed?</p>";
    askConfirmation(title, htmlText, 'Delete', "btn-batch", function() {
        $.ajax({
            url : "@{general.common.Common.getPlayHttpContext()}jatos/" + @study.getId() +"/batch/" + batch.id,
            type : 'DELETE',
            success : function(result) {
                showMessages(JSON.parse(result));
                loadBatches();
            },
            error : function(err) {
                showError(err.responseText);
            }
        });
    });
});

function getBatchData(element) {
    var batchItem = $(element).closest('.batchItem');
    var batch = batchItem.data();
    return batch;
}

function getBatchListData() {
    var batchList = [];
    $('.batchItem').each(function() {
        batchList.push($(this).data());
    });
    return batchList;
}

</script>

}