@(loggedInUser: common.User, breadcrumbs: String, localhost: Boolean, worker: common.workers.Worker)

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

<!-- Worker Info Panel -->
<div id="workerInfoPanel" class="panel panel-default">
    <div class="panel-body">
    Worker ID: @worker.getId()<br>
    <span class="workerType">Worker Type: </span><br>
    @if(worker.getWorkerType().equals(common.workers.MTWorker.WORKER_TYPE) || worker.getWorkerType().equals(common.workers.MTSandboxWorker.WORKER_TYPE)) {
        MTurk Worker ID: @worker.asInstanceOf[common.workers.MTWorker].getMTWorkerId()
    }
    @if(worker.getWorkerType().equals(common.workers.JatosWorker.WORKER_TYPE)) {
        @if(worker.asInstanceOf[common.workers.JatosWorker].getUser() != null) {
        Username: @worker.asInstanceOf[common.workers.JatosWorker].getUser().getUsername()
        } else {
        Username: unknown (user was probably deleted)
        }
    }
    @if(worker.getWorkerType().equals(common.workers.PersonalMultipleWorker.WORKER_TYPE)) {
        Comment: @worker.asInstanceOf[common.workers.PersonalMultipleWorker].getComment()
    }
    @if(worker.getWorkerType().equals(common.workers.PersonalSingleWorker.WORKER_TYPE)) {
        Comment: @worker.asInstanceOf[common.workers.PersonalSingleWorker].getComment()
    }
    </div>
</div>

<!-- Results table -->
<table id="resultsTable" class="table table-hover table-row-border" cellpadding="0" cellspacing="0" border="0" width="100%">
    <thead>
        <tr>
            <!-- If you change something in the head, change it in the footer too! -->
            <th><span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DATA"></span></th>
            <th><span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DATA_SELECTION"></span></th>
            <th>Result ID</th>
            <th>Start Time&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_START_TIME"></span></th>
            <th>End Time&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_END_TIME"></span></th>
            <th>Last Seen&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_LAST_SEEN_TIME"></span></th>
            <th>Duration&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DURATION"></span></th>
            <th>Study ID&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_ID"></span></th>
            <th>Study</th>
            <th>Batch</th>
            <th>Confirmation Code&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_CONFIRMATION_CODE"></span></th>
            <th>Group ID&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_GROUP_ID"></span></th>
            <th>Files&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_FILES"></span></th>
            <th>State&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_STATE"></span></th>
            <th>Message&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_MESSAGES"></span></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <!-- If you change something in the footer, change it in the head too! -->
            <th><span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DATA"></span></th>
            <th><span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DATA_SELECTION"></span></th>
            <th>Result ID</th>
            <th>Start Time&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_START_TIME"></span></th>
            <th>End Time&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_END_TIME"></span></th>
            <th>Last Seen&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_LAST_SEEN_TIME"></span></th>
            <th>Duration&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_DURATION"></span></th>
            <th>Study ID&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_ID"></span></th>
            <th>Study</th>
            <th>Batch</th>
            <th>Confirmation Code&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_CONFIRMATION_CODE"></span></th>
            <th>Group ID&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_GROUP_ID"></span></th>
            <th>Files&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_FILES"></span></th>
            <th>State&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_STATE"></span></th>
            <th>Message&nbsp;<span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="@general.common.MessagesStrings.RESULTS_STUDY_MESSAGES"></span></th>
        </tr>
    </tfoot>
</table>

<!-- Search / filter field with RegEx and Case button-->
<div id="resultsTableSearch" style="display: none">
    <label for="resultsTableSearch">Filter Results <span class="glyphicon glyphicon-info-sign gray-light" data-toggle="tooltip" title="You can filter for table's content (metadata) or search in the result data themselves"></span>:</label>
    <div class="input-group">
        <input type="search" class="form-control" placeholder="" autofocus>
        <div class="input-group-btn">
            <button type="button" class="btn btn-default regex" data-toggle="tooltip" data-placement="bottom" title="Treat as regular expression">RegEx</button>
            <button type="button" class="btn btn-default caseSensitive" data-toggle="tooltip" data-placement="bottom" title="Search case sensitive">Aa</button>
        </div>
    </div>
</div>

<!-- Component result data Modal -->
<div class="modal fade" id="componentResultDataModal" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <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">Component Result Data</h4>
            </div>
            <div class="modal-body">
                <pre><code class="componentResultData">
                </code></pre>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

$('#workerInfoPanel .workerType').append(getUIWorkerTypeWithGlyphicon('@worker.getWorkerType()'));

var resultsTable;
$(document).ready(function() {
    resultsTable = $('#resultsTable').DataTable({
        "ajax": {
            "url" : "@controllers.gui.routes.StudyResults.tableDataByWorker(worker.getId())",
            "dataType": "text",
            "dataSrc": function(json) {
                return JSON.parse("[" + json + "]");
            },
            "beforeSend": showWaitingModal,
            "error": function (err) {
                if (err.responseText) {
                    showError(err.responseText);
                } else {
                    showError("Cannot read results data.");
                }
            },
            "complete": hideWaitingModal
        },
        "dom": '<"pull-right"B>lfrtip',
        "order": [[ 2, "desc" ]],
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        "pageLength": 10,
        "stateSave": true,
        "columns": [
            {
                "class": 'details-control',
                "orderable": false,
                "data": "componentResultCount",
                "render": function (data, type, full, meta) {
                    return '<button type="button" class="btn btn-study collapseResultData" data-toggle="tooltip"' +
                        'data-placement="bottom" title="Show/hide component result data">' +
                        '<span class="badge">' + data + '</span>&nbsp;' +
                        '<span class="glyphicon glyphicon-chevron-right"></span></button>';
                }
            },
            {
                "data": null,
                "orderable": false,
                "render": function (data, type, full, meta) {
                    return '<button type="button" class="btn btn-default selectCheckbox" data-toggle="tooltip"' +
                        'data-placement="bottom" title="@general.common.MessagesStrings.RESULTS_DATA_SELECTION">' +
                        '<span class="glyphicon glyphicon-minus"></span></button>';
                }
            },
            {
                "data": "id",
                "width": "1%"
            },
            {
                "class": 'time',
                "data": "startDate"
            },
            {
                "data": "endDate",
                "visible": false,
                "render": function (data, type, full, meta) {
                    return (data) ? data : "never";
                }
            },
            {
                "data": "lastSeenDate",
                "render": function (data, type, full, meta) {
                    return (data) ? data : "never";
                }
            },
            {
                "data": "duration",
                "render": function (data, type, full, meta) {
                    return (data) ? data : "not yet";
                }
            },
            {
                "data": "studyId",
                "width": "1%",
                "visible": false,
                "render": function (data, type, full, meta) {
                    return '<a type="button" class="btn btn-study btn-xs" data-toggle="tooltip" ' +
                        'data-placement="bottom" title="Opens this study" ' +
                        'href="@{general.common.Common.getPlayHttpContext()}jatos/' + data + '">' + data + '</a>';
                }
            },
            { "data": "studyTitle" },
            { "data": "batchTitle" },
            {
                "data": getConfirmationCode,
                "width": "1%"
            },
            {
                "data": "groupResultId",
                "width": "1%",
                "visible": false,
                "render": function (data, type, full, meta) {
                    if (!data) return "none";
                    return '<a type="button" class="btn btn-batch btn-xs" data-toggle="tooltip" ' +
                        'data-placement="bottom" title="Click to get this group\'s results" ' +
                        'href="@{general.common.Common.getPlayHttpContext()}jatos/' + full.studyId + '/group/' + data + '/results">' + data + '</a>';
                }
            },
            {
                "data": "hasResultFiles",
                "visible": false,
                "width": "1%",
                "render": function (data, type, full, meta) {
                    return data ? '<span class="glyphicon glyphicon-ok"/>' : '<span class="glyphicon glyphicon-minus"/>';
                }
            },
            { "data": "studyState" },
            {
                "data": function(data, type, dataToSet) {
                    return data.message ? data.message : "none";
                },
                "width": "20%"
            }
        ],
        select: {
            "style": 'multi',
            "selector": 'td:nth-child(2)'
        },
        buttons: [
            {
                "text": "<span class='glyphicon glyphicon-refresh'></span>",
                "className": "btn btn-study",
                "titleAttr": 'Refresh results',
                "action": function ( e, dt, node, config ) {
                    this.disable();
                    resultsTable.ajax.reload();
                    setTimeout(this.enable, 3000);
                }
            },
            {
                "extend": "colvis",
                "text": "Show/Hide Columns <span class='caret'></span>",
                "className": "btn btn-study",
                "titleAttr": '@general.common.MessagesStrings.RESULTS_COLUMN_VISIBILITY',
                "columns": ':not(:last)'
            },
            {
                "extend": "selectAll",
                "text": "Select All",
                "className": "btn btn-study",
                "titleAttr": '@general.common.MessagesStrings.RESULTS_SELECT_ALL'
            },
            {
                "extends": "selectAll",
                "text": "Select Filtered",
                "className": "btn btn-study",
                "action": function(e, dt, node, config) {
                    dt.rows({ search: 'applied' }).select();
                },
                "titleAttr": '@general.common.MessagesStrings.RESULTS_SELECT_FILTERED'
            },
            {
                "extend": "selectNone",
                "text": "Deselect All",
                "className": "btn btn-study",
                "action": function(e, dt, node, config) {
                    dt.rows().deselect();
                },
                "titleAttr": '@general.common.MessagesStrings.RESULTS_DESELECT_ALL'
            },
            {
                "extend": 'collection',
                "text": 'Export Results <span class="caret"></span>',
                "className": "btn btn-study",
                "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_DATA',
                "buttons": [
                    {
                        "text": "Selected",
                        "action": exportSelectedResultData,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_SELECTED_DATA'
                    },
                    {
                        "text": "All",
                        "action": exportAllSelectedResultData,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_ALL_DATA'
                    }
                ]
            },
            {
                "extend": 'collection',
                "text": 'Export Files <span class="caret"></span>',
                "className": "btn btn-study exportFilesButton",
                "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_FILES',
                "buttons": [
                    {
                        "text": "Selected",
                        "action": exportSelectedResultFiles,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_SELECTED_FILES'
                    },
                    {
                        "text": "All",
                        "action": exportAllResultFiles,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_ALL_FILES'
                    }
                ]
            },
            {
                "extend": 'collection',
                "text": 'Export Metadata <span class="caret"></span>',
                "className": "btn btn-study",
                "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_METADATA',
                "buttons": [
                    {
                        "extend": 'csv',
                        "text": "Selected",
                        "filename": function() { return "jatos_meta_" + moment().format("YYYYMMDDHHmmss") },
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_SELECTED_METADATA',
                        "exportOptions": {
                            "columns": ':nth-child(n+3):visible',
                            "modifier": {
                                "selected": true
                            }
                        },
                        "action": function(e, dt, node, config) {
                            $("ul.dropdown-menu").hide();
                            $('#waitingModal').modal('show');
                            setTimeout(function(){
                                $.fn.dataTable.ext.buttons.csvHtml5.action.call(dt.button(this), e, dt, node, config);
                                $('#waitingModal').modal('hide');
                            }, 1000);
                        }
                    },
                    {
                        "extend": 'csv',
                        "text": "All",
                        "filename": function() { return "jatos_meta_" + moment().format("YYYYMMDDHHmmss") },
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_EXPORT_ALL_METADATA',
                        "exportOptions": {
                            "columns": ':nth-child(n+3):visible'
                        },
                        "action": function(e, dt, node, config) {
                            $("ul.dropdown-menu").hide();
                            $('#waitingModal').modal('show');
                            setTimeout(function(){
                                $.fn.dataTable.ext.buttons.csvHtml5.action.call(dt.button(this), e, dt, node, config);
                                $('#waitingModal').modal('hide');
                            }, 1000);
                        }
                    }
                ]
            },
            {
                "extend": 'collection',
                "text": 'Delete <span class="caret"></span>',
                "className": "btn btn-danger",
                "buttons": [
                    {
                        "text": "Selected",
                        "action": deleteSelectedResults,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_DELETE'
                    },
                    {
                        "text": "All",
                        "action": deleteAllResults,
                        "titleAttr": '@general.common.MessagesStrings.RESULTS_DELETE_ALL'
                    }
                ]
            }
        ]
    });

    // Swap dataTables filter field with our own
    $("#resultsTable_filter").empty();
    $("#resultsTable_filter").append($("#resultsTableSearch"));
    $("#resultsTableSearch").show();
    $("#resultsTableSearch input").focus();

    resultsTable.on('draw', function() {
        // Necessary - otherwise the button doesn't work with manually selected rows
        toggleDeselectAllButton();
        toggleExportFilesButton();
        setButtonWidthToMax("button.collapseResultData");
    });

    resultsTable.on('select', function (e, dt, type, indexes) {
        if (type == "row") {
            resultsTable.rows(indexes).nodes().to$().each(function(index, selectedRow) {
                $(selectedRow).find('.selectCheckbox').removeClass('btn-default').addClass('btn-study');
                $(selectedRow).find('.selectCheckbox .glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-ok');
            });
        }
    });

    resultsTable.on('deselect', function (e, dt, type, indexes) {
        if (type == "row") {
            resultsTable.rows(indexes).nodes().to$().each(function(index, selectedRow) {
                $(selectedRow).find('.selectCheckbox').removeClass('btn-study').addClass('btn-default');
                $(selectedRow).find('.selectCheckbox .glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-minus');
            });
        }
    });

    $('#resultsTableSearch input').on('keyup click', searchResultTable);

    $('#resultsTableSearch button.regex, button.caseSensitive').on('click', function () {
        var button = $(this);
        if (button.hasClass('checked')) {
            button.removeClass('checked');
            button.removeClass('btn-study');
            button.addClass('btn-default');
        } else {
            button.addClass('checked');
            button.removeClass('btn-default');
            button.addClass('btn-study');
        }
        searchResultTable();
    });

    function searchResultTable() {
        resultsTable.search(
            $('#resultsTableSearch input').val(),
            $('#resultsTableSearch .regex').hasClass('checked'),
            !$('#resultsTableSearch .regex').hasClass('checked'),
            !$('#resultsTableSearch .caseSensitive').hasClass('checked')
        ).draw();
    }

    function toggleDeselectAllButton() {
        if (resultsTable.rows('.selected').any()) {
            resultsTable.buttons(['.buttons-select-none']).enable();
        } else {
            resultsTable.buttons(['.buttons-select-none']).disable();
        }
    }

    function toggleExportFilesButton() {
        resultsTable.buttons(['.exportFilesButton']).disable();
        if (resultsTable.rows().data().toArray().find(function(studyResult) { return studyResult.hasResultFiles })) {
            resultsTable.buttons(['.exportFilesButton']).enable();
        }
    }

    function getConfirmationCode(data, type, dataToSet) {
        return (data.confirmationCode != null) ? data.confirmationCode : "none";
    }

    $('#resultsTable tbody').on('click', 'td.details-control', function() {
        var tr = $(this).closest('tr');
        var row = resultsTable.row(tr);
        if (row.child.isShown()) {
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            });
        }
        else {
            var studyResultId = row.data().id;
            $.ajax({
                url : "@{general.common.Common.getPlayHttpContext()}jatos/studyResult/" + studyResultId + "/componentResults",
                contentType: "application/json; charset=utf-8"
            }).done(function(result) {
                var childRow = generateComponentResultsChildRow(result, studyResultId);
                row.child(childRow).show();
                tr.addClass('shown');
                tr.next().addClass('info');
                $('div.slider', row.child()).slideDown();
            }).fail(function(err) {
                showError(err.responseText);
            });
        }
        $(this).find('.glyphicon-chevron-down, .glyphicon-chevron-right')
                .toggleClass('glyphicon-chevron-right glyphicon-chevron-down');
    });

    function exportAllSelectedResultData(e, dt, node, config) {
        exportSelectedResultData(e, dt, node, config, true);
    }

    function exportSelectedResultData(e, dt, node, config, exportAll) {
        $("ul.dropdown-menu").hide();
        showWaitingModal();
        var selectedTrs = exportAll ? resultsTable.rows().nodes() : resultsTable.rows('.selected').nodes();
        var ids = [];
        $.each(selectedTrs, function(index, selectedTr) {
            var rowData = resultsTable.row(selectedTr).data();
            ids.push(rowData.id);
        });
        if (ids.length == 0) {
            hideWaitingModal();
            showError("No results selected");
            return;
        }

        var url = '@controllers.gui.routes.ImportExport.exportDataOfStudyResults()';
        var data = JSON.stringify({resultIds: ids});
        var filename = "jatos_results_" + moment().format("YYYYMMDDHHmmss") + ".txt";
        downloadFileStreaming(url, data, filename);
    }

    function deleteAllResults(e, dt, node, config) {
        deleteSelectedResults(e, dt, node, config, true);
    }

    function deleteSelectedResults(e, dt, node, config, deleteAll) {
        $("ul.dropdown-menu").hide();
        showWaitingModal();
        var selectedTrs = deleteAll ? resultsTable.rows().nodes() : resultsTable.rows('.selected').nodes();
        var ids = [];
        $.each(selectedTrs, function(index, selectedTr) {
            var rowData = resultsTable.row(selectedTr).data();
            ids.push(rowData.id);
        });
        if (ids.length <= 0) {
            hideWaitingModal();
            showError("No results selected");
            return;
        }

        var htmlText;
        if (deleteAll) {
            htmlText = "<p>You are about to delete <b>ALL</b> study results of the @worker.getUIWorkerType() worker "
                + "with the ID @worker.getId() <b>with all their component results</b>.</p>"
                + "<p><b>This cannot be undone.</b> Do you want to proceed?</p>";
        } else {
            htmlText = "<p>You are about to delete the study results (ID " + ids.join(", ") + ") "
                + "<b>with all their component results</b>.</p>"
                + "<p><b>This cannot be undone.</b> Do you want to proceed?</p>";
        }
        var title = "Confirm Delete";
        hideWaitingModal();
        askConfirmation(title, htmlText, 'Delete', 'btn-primary', function() {
            showWaitingModal();
            $.ajax({
                url : '@controllers.gui.routes.StudyResults.remove()',
                type : 'POST',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({resultIds: ids}),
                success : function(result) {
                    $.each(selectedTrs, function(index, selectedTr) {
                        resultsTable.row(selectedTr).remove().draw();
                    });
                },
                error : function(err) {
                    showError(err.responseText);
                },
                complete: hideWaitingModal
            });
        });
    }

    function exportAllResultFiles(e, dt, node, config) {
        exportSelectedResultFiles(e, dt, node, config, true);
    }

    function exportSelectedResultFiles(e, dt, node, config, exportAll) {
        $("ul.dropdown-menu").hide();
        showWaitingModal();
        var selectedTrs = exportAll ? resultsTable.rows().nodes() : resultsTable.rows('.selected').nodes();
        var ids = [];
        $.each(selectedTrs, function(index, selectedTr) {
            var rowData = resultsTable.row(selectedTr).data();
            ids.push(rowData.id);
        });
        if (ids.length == 0) {
            hideWaitingModal();
            showError("No results selected");
            return;
        }

        var url = '@controllers.gui.routes.ImportExport.exportResultFilesOfStudyResults()';
        var data = JSON.stringify({resultIds: ids});
        var filename = "jatos_resultfiles_" + moment().format("YYYYMMDDHHmmss") + ".zip";
        downloadFileStreaming(url, data, filename);
    }

    function generateComponentResultsChildRow(componentResults, studyResultId) {
        var childRow = $('<div class="slider" style="display: none">'
            + '<table class="table borderless" cellpadding="5" cellspacing="0" border="0">'
            + '<tr class="info header">'
            + '<td><b>Comp. Result ID</b></td>'
            + '<td><b>Comp. ID</b></td>'
            + '<td><b>Component Title</b></td>'
            + '<td><b>Start Time (Server)</b></td>'
            + '<td><b>Duration</b></td>'
            + '<td><b>State</b></td>'
            + '<td><b>Data Size</b></td>'
            + '<td><b>Files (Size)</b></td>'
            + '<td><b>Message</b></td>'
            + '</tr>'
            + '</table>'
            + '</div>');

        if (componentResults.length == 0) {
            var row = $('<tr class="info"><td colspan="9">empty</td></tr>');
            childRow.find("tr").after(row);
            return childRow;
        }

        componentResults.forEach(function(componentResult) {
            var duration = (componentResult.duration) ? componentResult.duration : "not yet";
            var message = (componentResult.message) ? componentResult.message : "none";
            var resultFiles = componentResult.files.map(function(fileObj) {
                var url = "@{general.common.Common.getPlayHttpContext()}jatos/" + componentResult.studyId + "/resultFiles/"
                    + studyResultId + "/" + componentResult.id + "/" + fileObj.name;
                return '<a href="' + url + '" download>' + fileObj.name + '&nbsp;(' + fileObj.size + ')</a>';
            });
            if (resultFiles.length === 0) resultFiles.push("none");
            var showAllButton = "";
            if (componentResult.data.substr(componentResult.data.length - 3) == "...") {
                showAllButton = '<button type="button" class="btn btn-xs showAllButton" data-toggle="tooltip" '
                    + 'title="Show all result data of this component result.">show all</button>';
            }

            var row1 = $('<tr class="info">'
                + '<td>' + componentResult.id + '</td>'
                + '<td>' + componentResult.componentId + '</td>'
                + '<td>' + componentResult.componentTitle + '</td>'
                + '<td>' + componentResult.startDate + '</td>'
                + '<td>' + duration + '</td>'
                + '<td>' + componentResult.componentState + '</td>'
                + '<td>' + componentResult.dataSize + '</td>'
                + '<td>' + resultFiles.join('<br>') + '</td>'
                + '<td>' + message + '</td>'
                + '</tr>');
            var row2 = $('<tr class="info">'
                + '<td colspan="9"><pre class="details-data">' + componentResult.data + showAllButton +'</pre></td>'
                + '</tr>');
            row2.data(componentResult);
            childRow.find("tr").last().after(row1, row2);
        });

        return childRow;
    }

    $('#resultsTable tbody').on('click', '.showAllButton', function() {
        var componentResultId = $(this).closest('tr').data().id;
        $('#componentResultDataModal .modal-title').text("Data of Component Result with ID " + componentResultId);
        $.ajax({
            url : '@controllers.gui.routes.ImportExport.exportDataOfComponentResults()',
            type : 'POST',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({resultIds: [componentResultId]}),
            success : function(result) {
                $('#componentResultDataModal .componentResultData').text(result);
                $('#componentResultDataModal').modal('show');
            },
            error : function(err) {
                showError(err.responseText);
            }
        });
    });

});

</script>

}