<html>
    <head>
        <script>
            {{PLOTLY_LIB}}
        </script>
        <script>
            {{HTML2CANVAS_LIB}}
        </script>
        <script>
            var evaluationContents = [];
        </script>
        <style>
            {{CSSNESS}}
        </style>
    </head>
    <body>
        <h1>CCOBRA Evaluation Results</h1>

        <table>
            <tr><td>Benchmark</td><td>{{BENCHMARK_NAME}}</td></tr>
            <tr><td>Date</td><td>{{BENCHMARK_DATE}}</td></tr>
            <tr><td>Results</td><td><button id="downloadResultButton" type="button">Download</button></td></tr>
        </table>

        <div>
            {{CONTENT}}
        </div>

        <script>
            /**
                Saves the plot by creating a screenshot
            **/
            function save_plot(plot_div)
            {
                // Retrieve zoomness and save current zoom
                var gd = document.getElementById(plot_div);
                var xRange = gd.layout.xaxis.range;
                var yRange = gd.layout.yaxis.range;

                // Save current hover-mode
                var savedHoverMode = gd.layout.hovermode;

                // Hides the modeBar (for the screenshot)
                evaluationContents[plot_div].config.displayModeBar = false;

                // New layout with the current zoom level and disabled hover for the screenshot
                evaluationContents[plot_div].layout.hovermode = false;
                evaluationContents[plot_div].layout.xaxis.range = xRange;
                evaluationContents[plot_div].layout.yaxis.range = yRange;

                // Applies new config and layout
                Plotly.react(plot_div,
                            evaluationContents[plot_div].data,
                            evaluationContents[plot_div].layout,
                            evaluationContents[plot_div].config);

                // Pass plot to html2canvas (and wait --> promise is given)
                html2canvas(document.getElementById(plot_div)).then(function(canvas) {
                    // Append the canvas to get a URL
                    document.body.appendChild(canvas);

                    // Get image content from canvas and trigger download
                    var url = canvas.toDataURL();
                    var link = document.createElement('a');
                    link.setAttribute('href', url);
                    link.setAttribute('download', plot_div + '.png');
                    document.body.appendChild(link);
                    link.click();

                    // Clean up
                    document.body.removeChild(canvas);

                    // Retrieve zoomness again (for redrawing after the screenshot)
                    var gd = document.getElementById(plot_div);
                    var xRange = gd.layout.xaxis.range;
                    var yRange = gd.layout.yaxis.range;

                    // Config for resetting everything after screenshot (with restored buttons)
                    evaluationContents[plot_div].config.displayModeBar = true;

                    // Layout for resetting everything after screenshot (with restored hover)
                    evaluationContents[plot_div].layout.hovermode = savedHoverMode;
                    evaluationContents[plot_div].layout.xaxis.range = xRange;
                    evaluationContents[plot_div].layout.yaxis.range = yRange;

                    // Redraw plot
                    Plotly.react(plot_div,
                                evaluationContents[plot_div].data,
                                evaluationContents[plot_div].layout,
                                evaluationContents[plot_div].config);
                });
            }

            var savebuttons = document.getElementsByClassName("figsave");
            for (i = 0; i < savebuttons.length; i++) {
                var cur = savebuttons[i];
                cur.onclick = function(e) {
                    save_plot(e.target.getAttribute("plot_type"));
                };
            }

            var resultData = {{RESULT_DATA}};
            function downloadResultData() {
                var csvContent = "data:text/csv;charset=utf-8,";
                csvContent += resultData.join(String.fromCharCode(10));
                var encodedUri = encodeURI(csvContent);
                var link = document.createElement("a");
                link.setAttribute("href", encodedUri);
                link.setAttribute("download", "data.csv");
                document.body.appendChild(link);
                link.click();
            }

            document.getElementById("downloadResultButton").onclick = downloadResultData;

            {{SCRIPTS}}
        </script>
    </body>
</html>