<p style="text-align: center">{{TEXT}}</p>

<p style="text-align: center">
    Select subject ID: <select id="select_subject_box_{{PLOT_TYPE}}"></select>
</p>
<p style="text-align: center">
    <button id="btn_subj_table_{{PLOT_TYPE}}" class="button_result" type="button" onclick="drawSubjectTable_{{PLOT_TYPE}}()">Show</button>
</p>

<div id="subject_table_container_{{PLOT_TYPE}}" class="scrollable_container"></div>

<script>
	var subj_table_predenc_name_{{PLOT_TYPE}} = "{{PRED_ENC_NAME}}";
	var subj_table_truthenc_name_{{PLOT_TYPE}} = "{{TRUTH_ENC_NAME}}";
    function readData(rows) {
        var subjectDict_{{PLOT_TYPE}} = {};
        var models = new Set();
        var tasks = new Set();
        var ids = new Set();

        var header = rows[0].replace(/\r/g, "").split(",");
        if(header.indexOf("task_enc") == -1) return [{},[],[],[]];

        for(i=1; i<rows.length; i++) {
            if(rows[i] == "") continue;
            elements = rows[i].replace(/\r/g, "").split(",");

            id = elements[header.indexOf("id")];
            if(!(id in subjectDict_{{PLOT_TYPE}})) subjectDict_{{PLOT_TYPE}}[id] = {};
            ids.add(id);

            task = elements[header.indexOf("task_enc")];
            if(!(task in subjectDict_{{PLOT_TYPE}}[id])) subjectDict_{{PLOT_TYPE}}[id][task] = {};
            tasks.add(task);

            model = elements[header.indexOf("model")];
            models.add(model);
            subjectDict_{{PLOT_TYPE}}[id][task][model] = elements[header.indexOf(subj_table_predenc_name_{{PLOT_TYPE}})];
            subjectDict_{{PLOT_TYPE}}[id][task]["_truth"] = elements[header.indexOf(subj_table_truthenc_name_{{PLOT_TYPE}})];
        }
        return [subjectDict_{{PLOT_TYPE}}, tasks, models, ids];
    }
    function addOptionsToList(lis, options) {
        for(i=0; i<options.length; i++) {
            var opt = document.createElement('option');
            opt.appendChild(document.createTextNode(options[i]));
            lis.appendChild(opt);
        }
    }

    var dataResult_{{PLOT_TYPE}} = readData(resultData);
    var subjectDict_{{PLOT_TYPE}} = dataResult_{{PLOT_TYPE}}[0];
    var uniqueTasks_{{PLOT_TYPE}} = Array.from(dataResult_{{PLOT_TYPE}}[1]);
    uniqueTasks_{{PLOT_TYPE}}.sort();
    var uniqueModels_{{PLOT_TYPE}} = Array.from(dataResult_{{PLOT_TYPE}}[2]);
    uniqueModels_{{PLOT_TYPE}}.sort();
    var uniqueIds_{{PLOT_TYPE}} = Array.from(dataResult_{{PLOT_TYPE}}[3]);

    addOptionsToList(document.getElementById('select_subject_box_{{PLOT_TYPE}}'), uniqueIds_{{PLOT_TYPE}});

    function drawSubjectTable_{{PLOT_TYPE}}() {
        var selection = document.getElementById("select_subject_box_{{PLOT_TYPE}}").value;
        if(selection === 'undefined' || selection == "") return;
        if(!(selection in subjectDict_{{PLOT_TYPE}})) return;
        if(uniqueIds_{{PLOT_TYPE}}.length == 0) return;

        var table_html = '<table class="subj_table" align="center">';
        var header = ["Task"];
        for(i=0; i<uniqueModels_{{PLOT_TYPE}}.length; i++) header.push(uniqueModels_{{PLOT_TYPE}}[i]);
        header.push("Truth");
        table_html += '<tr><th>';
        table_html += header.join("</th><th>");
        table_html += "</th></tr>";

        subjectResults = subjectDict_{{PLOT_TYPE}}[selection];
        uniqueTasks_{{PLOT_TYPE}}.forEach(function(task) {
            taskResults = subjectResults[task];
            if (taskResults != null) {
                console.debug(taskResults);
                table_html += "<tr>";
                table_html += "<td>" + task + "</td>";
                truth = taskResults["_truth"];
                uniqueModels_{{PLOT_TYPE}}.forEach(function(model) {
                    prediction = taskResults[model];
                    if(prediction == truth)
                        table_html += "<td corrpred>" + prediction + "</td>";
                    else
                        table_html += "<td>" + prediction + "</td>";
                });
                table_html += "<td>" + taskResults["_truth"] + "</td>";
                table_html += "</tr>";
            }
        });
        document.getElementById("subject_table_container_{{PLOT_TYPE}}").innerHTML = table_html;
    }

    document.getElementById("btn_subj_table_{{PLOT_TYPE}}").onclick = drawSubjectTable_{{PLOT_TYPE}};

</script>
