<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ml-statistic-report</title>
    <script src="https://cdn.bootcss.com/d3/3.2.8/d3.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script>
String.prototype.replaceAll = function(exp, newStr){
    return this.replace(new RegExp(exp, 'gm'), newStr)
};
String.prototype.format = function(args) {
    var result = this;
    if (arguments.length < 1) {
        return result;
    }

    var data = arguments;
    if (arguments.length == 1 && typeof (args) == "object") {
        data = args;
    }
    for ( var key in data) {
        var value = data[key];
        if (undefined != value) {
            result = result.replaceAll("\\{" + key + "\\}", value);
        }
    }
    return result;
};

function matrix_chart(canvas_id){
    var _chart = {}
    var _width = 600, _height = 300,
        _margins = {top: 30, left: 150, right: 30, bottom: 30},
        _data = [], _x_keys=[], _y_keys=[],
        _color_bound=['#72aeda','#18405e'],
        _svg,
        _canvasG,
        _x,
        _y,
        _rows,
        _cols,
        _axesG;

    _chart.render = function(){
      if (!_svg){
        _svg = d3.select('#'+canvas_id)
                .append('svg')
                .attr('height',_height)
                .attr('width',_width)

          _axesG = _svg.append("g")
                  .attr("class", "axes");

        renderAxes(_svg);
      }
      renderCanvas(_svg)
    }

    function renderAxes(svg) {
      if (!_axesG){
        _axesG = svg.append("g")
            .attr("class", "axes");
      }

      renderXAxis(_axesG);
      renderYAxis(_axesG);
    }

    function renderXAxis(axesG){
      _x = d3.scale.ordinal()
          .domain(_x_keys)
          .rangeRoundBands([0,quadrantWidth()],0.1)

      var xAxis = d3.svg.axis()
          .scale(_x)
          .orient("bottom");

      axesG.append("g")
          .attr("class", "x axis")
          .attr("transform", function () {
            return "translate(" + xStart() + "," + yStart() + ")";})
          .call(xAxis);

      }
    function renderYAxis(axesG){
      _y = d3.scale.ordinal()
          .domain(_y_keys)
          .rangeRoundBands([0,quadrantHeight()],0.1)

      var yAxis = d3.svg.axis()
          .scale(_y)
          .orient("left");

        axesG.append("g")
                .attr("class", "y axis")
                .attr("transform", function () {
                    return "translate(" + xStart() + "," + yEnd() + ")";
                })
                .call(yAxis);
    }
    function renderCanvas(svg){
      if (!_canvasG){
        _canvasG = svg.append('g')
                .attr('class','body')
                .attr("transform", "translate("
                        + xStart() + ","
                        + yEnd() + ")") // <-2E
      }

      renderMatrix();
    }

    function renderMatrix(){
      x_domain = []
      for(var i = 0; i < _cols; i = i+1){
        x_domain.push(i)
      }
      x = d3.scale.ordinal()
          .domain(x_domain)
          .rangeRoundBands([0,quadrantWidth()],0.01)

      y_domain=[]
      for(var i = 0; i < _rows; i = i+1){
        y_domain.push(i)
      }
      y = d3.scale.ordinal()
          .domain(y_domain)
          .rangeRoundBands([0,quadrantHeight()],0.01)

      var min_value = d3.min(_data);
      var color_scale = null;
      if(min_value < 0.0){
        color_scale = d3.scale.linear()
          .domain([d3.min(_data), 0, d3.max(_data)])
          .range(_color_bound)
      }
      else{
        color_scale = d3.scale.linear()
          .domain([d3.min(_data), d3.max(_data)])
          .range(_color_bound)
      }

      _canvasG.selectAll('rect')
          .data(_data)
          .enter()
          .append('rect')
          .attr('x',function(d,i){return x(i % _cols);})
          .attr('y',function(d,i){return y(parseInt(i / _cols))})
          .attr('width',function(d){return x.rangeBand();})
          .attr('height',function(d){return y.rangeBand();})
          .attr('fill',function(d){return color_scale(d);})
          .append('title')
          .text(function(d){
            return d;
          })

      _canvasG.selectAll('rect')
          .data(_data)
          .transition()
          .attr('fill',function(d){return color_scale(d);})
          .select('title')
          .text(function(d){
            return d;
          })

      _canvasG.selectAll('rect')
          .data(_data)
          .exit()
          .remove()
    }

    function xStart() {
        return _margins.left;
    }

    function yStart() {
        return _height - _margins.bottom;
    }

    function xEnd() {
        return _width - _margins.right;
    }

    function yEnd() {
        return _margins.top;
    }

    function quadrantWidth() {
        return _width - _margins.left - _margins.right;
    }

    function quadrantHeight() {
        return _height - _margins.top - _margins.bottom;
    }

    _chart.width = function (w) {
        if (!arguments.length) return _width;
        _width = w;
        return _chart;
    };

    _chart.height = function (h) { // <-1C
        if (!arguments.length) return _height;
        _height = h;
        return _chart;
    };

    _chart.margins = function (m) {
        if (!arguments.length) return _margins;
        _margins = m;
        return _chart;
    };

    _chart.colors = function (c) {
        if (!arguments.length) return _colors;
        _colors = c;
        return _chart;
    };

    _chart.addSeries = function(data){
        _rows = data.length
        _cols = data[0].length
        _data = data.reduce(function(a, b) {return a.concat(b);});
        return _chart
    };

  _chart.addLegends = function(legends){
    _x_keys = legends['x']
    _y_keys = legends['y']
    return _chart;
  };
  _chart.setWidth = function(w){
    _width = w;
    return _chart;
  };
  _chart.setHeight = function(h){
    _height = h;
    return _chart;
  };
  _chart.setColorBound = function(bound){
    _color_bound = bound;
    return _chart;
  };

    return _chart;
  }
function line_chart(canvas_id) { // <-1A
    var _chart = {};
    var _width = 600, _height = 300, // <-1B
        _margins = {top: 30, left: 30, right: 30, bottom: 30},
            _x, _y,
            _data = [], _legends=[],
            _colors = d3.scale.category20(),
            _svg,
            _bodyG,
            _line,
            _axes_x,
            _axes_y,
            _axesG,
            _x_label,
            _y_label,
            _x_start=null,
            _x_end=null,
            _y_start=null,
            _y_end=null,
            _last_mouse_x=null,
            _last_mouse_y=null,
            _canvas_id=canvas_id;

    _chart.render = function () { // <-2A
        if (!_svg) {
            _svg = d3.select("#"+canvas_id)
                .append("svg") // <-2B
                .attr("height", _height)
                .attr("width", _width);
            defineBodyClip(_svg);

            _svg.on('mousedown',function(){
                 var position = d3.mouse(_svg.node())

                _last_mouse_x = position[0]
                _last_mouse_y = position[1]
            })
            _svg.on('mouseup', function(){
                var xx = d3.scale.linear().domain([30, quadrantWidth()+30]).range([_x_start, _x_end])
                var yy = d3.scale.linear().domain([quadrantHeight()+30, 30]).range([_y_start, _y_end])
                var position = d3.mouse(_svg.node())

                if(Math.abs(position[0] - _last_mouse_x) < 2 && Math.abs(position[1] - _last_mouse_y) < 2){
                    _x_start = null;
                    _y_start = null;
                    _x_end = null;
                    _y_end = null;
                }
                else{
                    _x_start = xx(Math.min(_last_mouse_x, position[0]))
                    _x_end = xx(Math.max(_last_mouse_x, position[0]))

                    _y_start = Math.min(yy(_last_mouse_y), yy(position[1]))
                    _y_end = Math.max(yy(_last_mouse_y), yy(position[1]))
                }

                renderAxes(_svg)
                renderBody(_svg)
            })
            // _svg.on('mousemove', function(){
            //     var xx = d3.scale.linear().domain([30, quadrantWidth()+30]).range([_x_start, _x_end])
            //     var yy = d3.scale.linear().domain([quadrantHeight()+30, 30]).range([_y_start, _y_end])
            //
            //     var position = d3.mouse(_svg.node())
            //     positionLabel.text('x: '+ xx(position[0])+' y: '+yy(position[1]));
            // })
        }

        renderAxes(_svg);
        renderBody(_svg);
    };

    function renderAxes(svg) {
        if(!_axesG) {
            _axesG = svg.append("g")
                    .attr("class", "axes");
        }

        if(_axes_x || _axes_y){
            _axesG.selectAll('*').remove()
        }

        renderXAxis(_axesG);
        renderYAxis(_axesG);
    }

    function renderXAxis(axesG){
        if(_x_start != null && _x_end != null){
            _x = d3.scale.linear()
                    .domain([_x_start, _x_end])
                    .range([0, quadrantWidth()]);
        }
        else{
            _x_start = d3.min(_data, function(d,i){return d3.min(d, function(d){return d.x})})
            _x_end = d3.max(_data, function (d,i) {return d3.max(d, function(d){return d.x})})

            _x = d3.scale.linear()
                    .domain([_x_start, _x_end])
                    .range([0, quadrantWidth()]);
        }

        var xAxis = d3.svg.axis()
                .scale(_x)
                .orient("bottom");

        _axes_x = axesG.append("g")
                .attr("class", "x axis")
                .attr("transform", function () {
                    return "translate(" + xStart() + "," + yStart() + ")";
                })
                .call(xAxis)
                .append("text")
                .attr("fill", "#000")
                .attr('x',quadrantWidth())
                .attr('y',30)
                .attr("dx", "0.71em")
                .style("text-anchor", "end")
                .text(_x_label);

        d3.select("#"+_canvas_id).selectAll("g.x g.tick")
            .append("line")
                .classed("grid-line", true)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", 0)
                .attr("y2", - quadrantHeight());
    }

    function renderYAxis(axesG){
        if(_y_start != null && _y_end != null){
            _y = d3.scale.linear()
                    .domain([_y_start, _y_end])
                    .range([quadrantHeight(), 0]);
        }
        else{
            _y_start = d3.min(_data, function(d,i){return d3.min(d, function(d){return d.y})})
            _y_end = d3.max(_data, function (d,i) {return d3.max(d, function(d){return d.y})})

            _y = d3.scale.linear()
                .domain([_y_start, _y_end])
                .range([quadrantHeight(), 0])
        }

        var yAxis = d3.svg.axis()
                .scale(_y)
                .orient("left");

        _axes_y = axesG.append("g")
                .attr("class", "y axis")
                .attr("transform", function () {
                    return "translate(" + xStart() + "," + yEnd() + ")";
                })
                .call(yAxis)
                .append("text")
                .attr("fill", "#000")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", "0.71em")
                .style("text-anchor", "end")
                .text(_y_label);

        d3.select('#'+_canvas_id).selectAll("g.y g.tick")
            .append("line")
                .classed("grid-line", true)
                .attr("x1", 0)
                .attr("y1", 0)
                .attr("x2", quadrantWidth())
                .attr("y2", 0);
    }

    function defineBodyClip(svg) { // <-2C
        var padding = 5;

        svg.append("defs")
                .append("clipPath")
                .attr("id", "body-clip")
                .append("rect")
                .attr("x", 0 - padding)
                .attr("y", 0)
                .attr("width", quadrantWidth() + 2 * padding)
                .attr("height", quadrantHeight());
    }

    function renderBody(svg) { // <-2D
        if (!_bodyG)
            _bodyG = svg.append("g")
                    .attr("class", "body")
                    .attr("transform", "translate("
                        + xStart() + ","
                        + yEnd() + ")") // <-2E
                    .attr("clip-path", "url(#body-clip)");

        renderLines();
        renderDots();
        renderLengend();
    }

    function renderLines() {
        _line = d3.svg.line() //<-4A
                        .x(function (d) { return _x(d.x); })
                        .y(function (d) { return _y(d.y); });

        _bodyG.selectAll("path.line")
                    .data(_data)
                .enter() //<-4B
                .append("path")
                .style("stroke", function (d, i) {
                    return _colors(i); //<-4C
                })
                .attr("class", "line")

        _bodyG.selectAll("path.line")
                .data(_data)
                .transition() //<-4D
                .attr("d", function (d) { return _line(d); });
    }

    function renderDots() {
        _data.forEach(function (list, i) {
            _bodyG.selectAll("circle._" + i) //<-4E
                        .data(list)
                    .enter()
                    .append("circle")
                    .attr("class", "dot _" + i);

            _bodyG.selectAll("circle._" + i)
                    .data(list)
                    .style("stroke", function (d) {
                        return _colors(i); //<-4F
                    })
                    .transition() //<-4G
                    .attr("cx", function (d) { return _x(d.x); })
                    .attr("cy", function (d) { return _y(d.y); })
                    .attr("r", 4.5)
        });
    }
    function renderLengend(){
        if (_legends.length != 0){
            legend = _bodyG.selectAll('.legend')
                    .data(_legends)
                    .enter()
                    .append('g')
                    .attr('class','legend')
                    .attr('transform',function(d,i){
                        return 'translate(' + 0 + ',' + 0 + ')';
                    });
            legend.append('circle')
                    .attr('class',function(d,i){
                        return "dot_"+i
                    })
                    .attr('stroke',function(d,i){
                        return _colors(i);
                    })
                    .attr('fill','#fff')
                    .attr('cx',function(d,i){
                        return xStart() + quadrantWidth() - 100;
                    })
                    .attr('cy',function(d,i){
                        return 10 * i + 20;
                    })
                    .attr('r',3)

            legend.append('text')
                    .attr('x', function (d,i) {
                        return xStart() + quadrantWidth() - 100 + 10
                    })
                    .attr('y',function (d,i) {
                        return 10 * i + 20 + 4
                    })
                    .attr('font-size',10)
                    .text(function(d,i){
                        return d
                    });
        }
    }

    function xStart() {
        return _margins.left;
    }

    function yStart() {
        return _height - _margins.bottom;
    }

    function xEnd() {
        return _width - _margins.right;
    }

    function yEnd() {
        return _margins.top;
    }

    function quadrantWidth() {
        return _width - _margins.left - _margins.right;
    }

    function quadrantHeight() {
        return _height - _margins.top - _margins.bottom;
    }

    _chart.width = function (w) {
        if (!arguments.length) return _width;
        _width = w;
        return _chart;
    };

    _chart.height = function (h) { // <-1C
        if (!arguments.length) return _height;
        _height = h;
        return _chart;
    };

    _chart.margins = function (m) {
        if (!arguments.length) return _margins;
        _margins = m;
        return _chart;
    };

    _chart.colors = function (c) {
        if (!arguments.length) return _colors;
        _colors = c;
        return _chart;
    };

    _chart.x = function (x) {
        if (!arguments.length) return _x;
        _x = x;
        return _chart;
    };

    _chart.y = function (y) {
        if (!arguments.length) return _y;
        _y = y;
        return _chart;
    };

    _chart.addSeries = function (series) { // <-1D
        _data = series;
        return _chart;
    };
    _chart.addLegends = function(legends){
        _legends = legends;
        return _chart;
    }
    _chart.addAxisLabel = function(x_label,y_label){
        _x_label = x_label
        _y_label = y_label
        return _chart
    }

    return _chart; // <-1E
}
function groupbar_chart(canvas_id){
    var _chart = {}
    var _width = 600, _height = 300,
        _margins = {top: 30, left: 30, right: 30, bottom: 30},
        _data = [], _keys=[],
        _colors = d3.scale.category20c(),
        _svg,
        _canvasG,
        _axesG,
        _axes_x,
        _axes_y;

    _chart.render = function(){
      if (!_svg){
        _svg = d3.select('#'+canvas_id)
            .append('svg')
            .attr('height',_height)
            .attr('width',_width)
      }

      renderAxes(_svg)
      renderCanvas(_svg)
    }

    function renderAxes(svg){
      if(!_axesG) {
        _axesG = svg.append("g")
            .attr("class", "axes");
      }

      renderYAxis(_axesG);
    }

    function renderYAxis(axesG){
      y_axis_scale = d3.scale.linear()
          .domain([0, d3.max(_data, function(d,i){return d3.max(d, function(d){return d.y;})})])
          .range([quadrantHeight(), 0])

      var yAxis = d3.svg.axis()
          .scale(y_axis_scale)
          .orient("left");

      if(!_axes_y) {
        _axes_y = axesG.append("g")
            .attr("class", "y axis")
            .attr("transform", function () {
              return "translate(" + xStart() + "," + yEnd() + ")";
            })
            .call(yAxis);
      }
      else{
        axesG.select('g.y')
            .attr("class", "y axis")
            .attr("transform", function () {
              return "translate(" + xStart() + "," + yEnd() + ")";
            })
            .call(yAxis);
      }
    }

    function renderCanvas(svg){
      if (!_canvasG){
        _canvasG = svg.append('g')
            .attr('class','body')
            .attr("transform", "translate("
                + xStart() + "," + yEnd() + ")") // <-2E
      }

      renderGroupBar()
      renderLengend()
    }

    function renderGroupBar(){
      x0_domain=[]
      for (var i = 0; i < _data.length; ++i) x0_domain.push(i);
      var x0 = d3.scale.ordinal()
          .domain(x0_domain)
          .rangeRoundBands([0,quadrantWidth()],0.1)

      var x1 = d3.scale.ordinal()
          .domain(_keys)
          .rangeRoundBands([0,x0.rangeBand()],0.05)

      var y = d3.scale.linear()
          .domain([0, d3.max(_data, function(d,i){return d3.max(d, function(d){return d.y;})})])
          .rangeRound([quadrantHeight(),0])

      _canvasG.selectAll("g")
          .data(_data)
          .enter()
          .append("g")
          .attr('transform',function(d,i){return "translate(" + x0(i) + ",0)";})
          .selectAll("rect")
          .data(function (d) {return d;})
          .enter()
          .append('rect')
          .attr("x",function(d){return x1(d.x)})
          .attr("y",function (d) {return y(d.y)})
          .attr("width",x1.rangeBand())
          .attr("height",function(d){return quadrantHeight() - y(d.y)})
          .attr("fill", function(d,i){return _colors(i)})
          .attr('stroke',function(d,i){return _colors(i)})
          .on('mouseover',function(d,i){
            var rects = d3.select(this.parentNode.parentNode).selectAll('rect')
            rects.each(function (rd,ri) {
              if (ri % _keys.length == i){
                d3.select(this).attr('fill','	#696969').attr('stroke','#FFFAF0')
              }
            })
          })
          .on('mouseout',function(d,i){
            var rects = d3.select(this.parentNode.parentNode).selectAll('rect')
            rects.each(function (rd,ri) {
              if (ri % _keys.length == i){
                d3.select(this).attr('fill', _colors(i)).attr('stroke',_colors(i))
              }
            })
          })
          .append("title")
          .text(function(d) {
            return 'x= '+d.x + '\n' +'y= '+ d.y; })

      _canvasG.selectAll("g")
          .data(_data)
          .attr('transform',function(d,i){return "translate(" + x0(i) + ",0)";})
          .selectAll("rect")
          .data(function(d){return d;})
          .attr("x",function(d){return x1(d.x)})
          .attr("y",function (d) {return y(d.y)})
          .attr("width",x1.rangeBand())
          .attr("height",function(d){return quadrantHeight() - y(d.y)})
          .attr("fill", function(d,i){return _colors(i)})
          .attr('stroke',function(d,i){return _colors(i)})
          .select('title')
          .text(function(d) {
            return 'x= '+d.x + '\n' +'y= '+ d.y; })


      xAxis = d3.svg.axis()
          .scale(x0)
          .orient('bottom')

      if(!_axes_x) {
        _axes_x = _axesG.append("g")
            .attr('class', 'x axis')
            .attr('transform', function () {
              return "translate(" + xStart() + "," + yStart() + ")";
            })
            .call(xAxis)
      }
      else{
        _axesG.select("g.x")
            .attr('transform', function () {
              return "translate(" + xStart() + "," + yStart() + ")";
            })
            .call(xAxis)
      }
    }

    function renderLengend(){
      legend = _canvasG.selectAll('.legend')
          .data(_keys)
          .enter()
          .append('g')
          .attr('class','legend')

      legend.append('rect')
          .attr('x',function(d,i){return xStart() + quadrantWidth() - 150; })
          .attr('y',function(d,i){return 20 * i + 20;})
          .attr('width',10)
          .attr('height',10)
          .attr('fill',function(d,i){return _colors(i);})
      legend.append('text')
          .attr('x',function(d,i){return xStart() + quadrantWidth() - 150 + 20; })
          .attr('y',function(d,i){return 20 * i + 20 + 8;})
          .attr('font-size',10)
          .text(function(d,i){
            return d;})
      }

    function xStart() {
        return _margins.left;
    }

    function yStart() {
        return _height - _margins.bottom;
    }

    function xEnd() {
        return _width - _margins.right;
    }

    function yEnd() {
        return _margins.top;
    }

    function quadrantWidth() {
        return _width - _margins.left - _margins.right;
    }

    function quadrantHeight() {
        return _height - _margins.top - _margins.bottom;
    }

    _chart.width = function (w) {
        if (!arguments.length) return _width;
        _width = w;
        return _chart;
    };

    _chart.height = function (h) { // <-1C
        if (!arguments.length) return _height;
        _height = h;
        return _chart;
    };

    _chart.margins = function (m) {
        if (!arguments.length) return _margins;
        _margins = m;
        return _chart;
    };

    _chart.colors = function (c) {
        if (!arguments.length) return _colors;
        _colors = c;
        return _chart;
    };

    _chart.y = function (y) {
        if (!arguments.length) return _y;
        _y = y;
        return _chart;
    };

    _chart.addSeries = function(data){
        _data = data;
        if (_keys.length == 0){
            for (d in data[0]){
                _keys.push(data[0][d].x)
            }
        }

      return _chart
    };

    return _chart;
  }
function draw_table(data,div_id,title) {
    $("<style>\
        .data-table table {\
            font-family: arial, sans-serif;\
            border-collapse: collapse;\
            text-align: center;\
        }\
        .data-table td,.data-table th{  border: 1px solid #dddddd;\
            text-align: left;\
            padding: 8px;\
            text-align: center;\
        }\
     </style>").appendTo("head");

    var dvTable = document.getElementById(div_id);
    var width=dvTable.clientWidth;
    var height=dvTable.clientHeight*0.8;

    //Create a HTML Table element.
    var table = document.createElement("TABLE");
    table.width=width;
    table.height=height;

    //Get the count of columns.
    var columnCount = data[0].length;

    //Add the header row.
    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = data[0][i];
        row.appendChild(headerCell);
    }

    //Add the data rows.
    for (var i = 1; i < data.length; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < columnCount; j++) {
            var cell = row.insertCell(-1);
            cell.innerHTML = data[i][j];
        }
    }

    dvTable.appendChild(table);
}
function draw_image(canvas_id, data){
    $('#'+canvas_id).append('<img src="data:image/png;base64,'+data+'">')
}

curve_data = [
    {% for measure in measures %}
        {% for model_statistic_val in measure.statistic.value %}
            {% if model_statistic_val.type == 'CURVE' %}
                    {'name':"{{model_statistic_val.name}}",'x-name':'{{model_statistic_val.x}}','y-name':'{{model_statistic_val.y}}','data':[
                        {% for data in model_statistic_val.value %}
                            [
                                {% for xy in data %}
                                    {'x':{{xy.x}},'y':{{xy.y}}},
                                {% endfor %}
                            ],
                        {% endfor %}
                    ],},
            {% endif %}
        {% endfor %}
    {% endfor %}
]

bar_data = [
    {% for measure in measures %}
        {% for model_statistic_val in measure.statistic.value %}
            {% if model_statistic_val.type == 'HISTOGRAM' %}
                    {'name':"{{model_statistic_val.name}}",'x-name':'{{model_statistic_val.x}}','y-name':'{{model_statistic_val.y}}','data':[
                        {% for data in model_statistic_val.value %}
                        [
                                {% for xy in data %}
                                    {'x':{{xy.x}},'y':{{xy.y}}},
                                {% endfor %}
                            ],
                        {% endfor %}
                    ],},
            {% endif %}
        {% endfor %}
    {% endfor %}
]

matrix_data = [
    {% for measure in measures%}
        {% for model_statistic_val in measure.statistic.value %}
            {% if model_statistic_val.type == 'MATRIX' %}
                {'name':"{{model_statistic_val.name}}",'x-name':{{model_statistic_val.x}},'y-name':{{model_statistic_val.y}}, 'data':{{model_statistic_val.value }}},
            {%endif%}
        {% endfor%}
    {% endfor%}
]

table_data = [
    {% for measure in measures %}
        {% for model_statistic_val in measure.statistic.value %}
            {% if model_statistic_val.type == 'TABLE' %}
                    {'name':"{{model_statistic_val.name}}",'data':{{model_statistic_val.value}},},
            {% endif %}
        {% endfor %}
    {% endfor %}
]

image_data = [
  {% for measure in measures %}
        {% for model_statistic_val in measure.statistic.value %}
            {% if model_statistic_val.type == 'IMAGE' %}
                    {'name':"{{model_statistic_val.name}}",'data':'{{model_statistic_val.value}}',},
            {% endif %}
        {% endfor %}
  {% endfor %}
]


model_analysis = [
    {%for analysis_data in analysis%}
      {'name':"{{analysis_data.name}}", 'data':{{analysis_data.value}},'x-name':{{analysis_data.x}},'y-name':{{analysis_data.y}}},
    {%endfor%}
]

pair_sig_compare= [
  {%for data in compare%}
    {'data':{{data.score}}, 'x-name': {{data.measure}}, 'y-name': {{data.benchmark}}}
  {%endfor%}
]

$(document).ready( function () {
    for(var index in curve_data){
        var measure_name = curve_data[index]['name'];
        var x_name = curve_data[index]['x-name'];
        var y_name = curve_data[index]['y-name'];
        var data = curve_data[index]['data'];

        var curve_chart = line_chart(measure_name+'-dashboard');
        curve_chart.addSeries(data);
        curve_chart.addAxisLabel(x_name, y_name);
        curve_chart.render()
    }
    for(var index in bar_data){
        var measure_name = bar_data[index]['name'];
        var x_name = bar_data[index]['x-name'];
        var y_name = bar_data[index]['y-name'];
        var data = bar_data[index]['data'];

        var bar_chart = groupbar_chart(measure_name+'-dashboard');
        bar_chart.addSeries(data)
        bar_chart.render()
    }
    for(var index in table_data){
        var measure_name = table_data[index]['name'];
        var data = table_data[index]['data']

        draw_table(data,measure_name+'-dashboard',measure_name)
    }
    for(var index in matrix_data){
        var measure_name = matrix_data[index]['name'];
        var data = matrix_data[index]['data'];
        var x_name = matrix_data[index]['x-name'];
        var y_name = matrix_data[index]['y-name'];

        var mc = matrix_chart(measure_name+'-dashboard');
        var rows = data.length;
        var cols = data[0].length;

        var max_size = rows;
        if(rows > cols){
          max_size = cols;
        }
        var cell_size = 500 / max_size;
        if(cell_size < 2){
          cell_size = 2;
        }
        mc.setWidth(cell_size * cols + 200);
        var opt_height = 100;
        if(opt_height < cell_size * rows){
          opt_height = cell_size * rows;
        }
        mc.setHeight(opt_height);

        mc.addLegends({'x':x_name, 'y':y_name});
        mc.addSeries(data);
        mc.render();
    }

    for(var index in image_data){
      var measure_name = image_data[index]['name'];
      var data = image_data[index]['data'];
      draw_image(measure_name+'-dashboard', data)
    }

    for(var index in model_analysis){
      var measure_name = model_analysis[index]['name'];
      var data = model_analysis[index]['data'];
      var x_name = model_analysis[index]['x-name'];
      var y_name = model_analysis[index]['y-name'];

      var mc = matrix_chart(measure_name+'-matrix-table');
      var rows = data.length;
      var cols = data[0].length;

      var max_size = rows;
      if(rows < cols){
        max_size = cols;
      }
      var cell_size = 500 / max_size;
      if(cell_size < 2){
        cell_size = 2;
      }
      mc.setWidth(cell_size * cols + 200);
      var opt_height = 100;
      if(opt_height < cell_size * rows){
          opt_height = cell_size * rows;
      }
      mc.setHeight(opt_height);

      mc.addLegends({'x':x_name, 'y':y_name});
      mc.addSeries(data);
      mc.render();
    }

    for(var index in pair_sig_compare){
      var x_name = pair_sig_compare[index]['x-name'];
      var y_name = pair_sig_compare[index]['y-name'];

      var data = pair_sig_compare[index]['data'];
      var mc = matrix_chart('significant-diff-compare');
            var rows = data.length;
      var cols = data[0].length;

      var max_size = rows;
      if(rows < cols){
        max_size = cols;
      }
      var cell_size = 500 / max_size;
      if(cell_size < 2){
        cell_size = 2;
      }
      mc.setWidth(cell_size * cols + 200);
      var opt_height = 100;
      if(opt_height < cell_size * rows){
          opt_height = cell_size * rows;
      }
      mc.setHeight(opt_height);
      mc.setColorBound(['#0098ff','#eeeeee','#ee3e32']);
      mc.addLegends({'x':x_name, 'y':y_name});
      mc.addSeries(data);
      mc.render();
    }

} );

$(document).ready(function(){
    $('a[name="add_col"]').on('click', function(){
        var parent_layer = $(this).parent();
        parent_layer.find("thead tr").find("th").eq(-3).after('<th><input placeholder="TAG"></th>')
        var rows_num = 0;
        parent_layer.find("tbody tr").each(function(i){
            rows_num = rows_num+1;
        })

        parent_layer.find("tbody tr").each(function(i){
            var col_num = 0;
            $(this).find('td').each(function(){
                col_num = col_num + 1;
            })

            if(i < (rows_num - 1)){
                var is_it_checkbox = $('<td col={0}><input type=checkbox name=is_it></td>'.format(col_num))
                $(this).find('td').eq(-3).after(is_it_checkbox);
                is_it_checkbox.find('input:first').on('change', function(){
                    var col_parent = $(this).parent();
                    var col_grandpa = col_parent.parent().parent();
                    var checked_box = 0;
                    var total_rows = 0;

                    col_grandpa.find('tr').each(function(n){
                        $(this).find('td').each(function(m){
                            if($(this).attr('col') == col_parent.attr('col')){
                                if($(this).find('input:first').is(':checked')){
                                    checked_box = checked_box + 1;
                                }
                                total_rows = total_rows + 1
                            }
                        })
                    })

                    col_grandpa.find('tr:last').find('td').each(function(m){
                        if($(this).attr('col') == col_parent.attr('col')){
                            $(this).text('{0}%'.format(Math.round(parseFloat(checked_box / (total_rows - 1))*100)))
                        }
                    })
                })
            }
            else{
                $(this).find('td').eq(-3).after('<td col={0}>0%</td>'.format(col_num))
            }
        })
    })
    $('a[name="subtract_col"]').on('click', function(){
        var parent_layer = $(this).parent();
        var col_num = 0;
        parent_layer.find("thead tr").find('th').each(function(i){
            col_num = col_num + 1;
        })
        if(col_num <= 4){
            return
        }

        parent_layer.find("thead tr").find('th').eq(-3).remove();
        parent_layer.find("tbody tr").each(function(){
            $(this).find("td").eq(-3).remove();
        })
    })

    $('#error_analysis_save').on('click', function(){

    })

    // initialize eye analysis statistic
    $('input[name="is_it"]').each(function(){
        $(this).on('change',function(){
            var col_parent = $(this).parent();
            var col_grandpa = col_parent.parent().parent();
            var checked_box = 0;
            var total_rows = 0;

            col_grandpa.find('tr').each(function(n){
                $(this).find('td').each(function(m){
                    if($(this).attr('col') == col_parent.attr('col')){
                        if($(this).find('input:first').is(':checked')){
                            checked_box = checked_box + 1;
                        }
                        total_rows = total_rows + 1
                    }
                })
            })

            col_grandpa.find('tr:last').find('td').each(function(m){
                if($(this).attr('col') == col_parent.attr('col')){
                    $(this).text('{0}%'.format(Math.round(parseFloat(checked_box / (total_rows - 1))*100)))
                }
            })
        })
        var col_parent = $(this).parent();
        var col_grandpa = col_parent.parent().parent();
        var checked_box = 0;
        var total_rows = 0;

        col_grandpa.find('tr').each(function(n){
            $(this).find('td').each(function(m){
                if($(this).attr('col') == col_parent.attr('col')){
                    if($(this).find('input:first').is(':checked')){
                        checked_box = checked_box + 1;
                    }
                    total_rows = total_rows + 1
                }
            })
        })

        col_grandpa.find('tr:last').find('td').each(function(m){
            if($(this).attr('col') == col_parent.attr('col')){
                $(this).text('{0}%'.format(Math.round(parseFloat(checked_box / (total_rows - 1))*100)))
            }
        })
    })
})

    $(document).ready(function(){
        $('img[name="image_container"]').each(function () {
             $(this).on('click', function () {
                 $("#bigger_image_container").html("<image src='"+$(this).attr('src') +"' class='carousel-inner img-responsive img-rounded' />");
                 $("#bigger_image_modal").modal();
             })
         })
    })
</script>
<style>
.cardtable {
    box-shadow: 0 0 4px rgba(0,0,0,.14),0px 4px 8px rgba(0,0,0,.14) !important;
    background: #fff;
    margin-bottom: 10px;
}
.table-responsive {
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
}
.list-group .list-group-separator-full {
    clear: both;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
.list-group .list-group-item {
    background-color: transparent;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    padding: 0 16px;
}
.list-group-item .item-title {
    overflow: hidden;
    font-size: 120%;
    color: #444;
    display: inline-block;
    padding-bottom: 10px;
    padding-top: 10px;
}
.list-group .list-group-separator-full:before {
    content: "";
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.1);
    float: right;
}
table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

td {
    color: #666;
    font-size: 11pt;
}
.evaltitle {
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 140%;
}
.mainvalue {
    font-size: 150%;
}

h1, h2, h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700 !important;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 48px;
}
h3 {
    font-size: 20px;
    clear: both;
    color: gray;
}
a {
    cursor: pointer;
}

.cardrow > td {
    padding-left: 15px !important;
    padding-top: 15px !important;
}

body {
    font-family: "helvetica";
}

button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;

    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.box {
    width: 200px;
    height: 200px;
    margin: 40px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.red {
    background-color: #e9967a;
    color: #f0f8ff;
}

.blue {
    background-color: #add8e6;
    color: #f0f8ff;
}

.cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    float: left;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.fixed-cell {
    min-width: 40px;
    min-height: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    border: #969696 solid thin;
    padding: 5px;
}

.h-bar {
    min-height: 15px;
    min-width: 10px;
    background-color: steelblue;
    margin-bottom: 2px;
    font-size: 11px;
    color: #f0f8ff;
    text-align: right;
    padding-right: 2px;
}

.v-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 2px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 10px;
    display: inline-block;
}

.baseline {
    height: 1px;
    background-color: black;
}

.clear {
    clear: both;
}

.selected {
    background-color: #f08080;
}

.control-group {
    padding-top: 10px;
    margin: 10px;
}

.table td, th {
    padding: 5px;
}

.table-header {
    background-color: #00AFEF;
    font-weight: bold;
}

.table-row-odd {
    background-color: #f0f8ff;
}

.table-row-odd {
    background-color: #d3d3d3;
}

.code {
    display: inline-block;
    font-style: italic;
    background-color: #d3d3d3;
    border: #969696 solid thin;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.countdown{
    width: 150px;
    height: 150px;
    font-size: 5em;
    font-weight: bold;
}

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis text {
    font: 10px sans-serif;
}

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

.line{
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

.dot {
  fill: #fff;
  stroke: steelblue;
}

.area {
    stroke: none;
    fill: steelblue;
    fill-opacity: .2;
}

.pie text{
    fill: white;
    font-weight: bold;
}

.circle {
    stroke: none;
    fill: red;
    fill-opacity: .7;
}

.cross {
    stroke: none;
    fill: blue;
    fill-opacity: .7;
}

.diamond {
    stroke: none;
    fill: green;
    fill-opacity: .7;
}

.square{
    stroke: none;
    fill: yellow;
    fill-opacity: .7;
}

.triangle-down{
    stroke: none;
    fill: blueviolet;
    fill-opacity: .7;
}

.triangle-up{
    stroke: none;
    fill: darkred;
    fill-opacity: .7;
}

.bubble{
    fill-opacity: .3;
}

.bar{
    stroke: none;
    fill: steelblue;
}

        .eye_error_analysis{

        }
        .eye_error_analysis td{
            text-align: center
        }
        .eye_error_analysis th{
            text-align: center
        }
        .eye_error_analysis input{
            text-align: center
        }
                .btn-white-to-blue{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-family: 'Atlas Grotesk',sans-serif;
    color: #6F7175;
    font-weight: bolder;
    font-size: 15px;
    text-decoration: none;
    padding: 5px 10px;
    background-color: #FFF;
    border: 1px solid #DEDFE0;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing:0px;
    text-align: center;
}
.btn-white-to-blue:hover{
    color: #20BEFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #FFF;
}
.btn-white-to-blue:active{
    color: #20BEFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #FFF;
}

.btn-white-to-blue:focus{
    color: #20BEFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #FFF;
}
.btn-white-to-blue:visited{
    color: #20BEFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #FFF;
}
.btn-blue-to-white{
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-family: 'Atlas Grotesk',sans-serif;
    font-weight: bolder;
    font-size: 15px;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing:0px;
    text-align: center;

    color: #20BEFF;
    border: 1px solid #20BEFF;
    background-color: #FFF;
}

.btn-blue-to-white:hover{
    color: #FFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #20BEFF;
}
.btn-blue-to-white:active{
    color: #FFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #20BEFF;
}
.btn-blue-to-white:focus{
    color: #FFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #20BEFF;
}
.btn-blue-to-white:visited{
    color: #FFF;
    text-decoration: none;
    border: 1px solid #20BEFF;
    background-color: #20BEFF;
}

</style>
<body>
  <nav class="navbar navbar-default" style="background-color:black;">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">-->
        <!--<span class="sr-only">Toggle navigation</span>-->
        <!--<span class="icon-bar"></span>-->
        <!--<span class="icon-bar"></span>-->
        <!--<span class="icon-bar"></span>-->
      <!--</button>-->
      <!--<a class="navbar-brand" href="#">Brand</a>-->
      <a class="navbar-brand" href="" style="font-family: \'Source Sans Pro\', sans-serif;color:#20BEFF;font-size: 50px;font-weight: bolder;background-color: transparent;">MLTalker</a>
    </div>

  </div><!-- /.container-fluid -->
</nav>
<div class="modal fade" id="bigger_image_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
            <div id="bigger_image_container"></div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="container">
    <div class="evaltitle">
        <b>Key Measures</b>
    </div>
    <div class="cardtable">
        <div class="table-responsive">
            <table class="table" style="table-layout:fixed">
            <tbody>
            {% if time %}
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>elpased time</b>
                    </div>
                    <div class="col-md-10">
                        <div class="list-group">
                            <div class="list-group-item">
                                <span class="mainvalue">{{time.elapsed_time}}</span>s
                            </div>
                            <div class="list-group-separator-full"></div>
                            <div class="list-group-item">
                                <div class="item-title">elapsed time per unit</div>
                                <span class="mainvalue">{{time.elapsed_time_per_sample}}</span>s
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            {% endif %}

            {% if cpu %}
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>cpu model</b>
                    </div>
                    <div class="col-md-10">
                        <div class="list-group">
                            <div class="list-group-item">
                                <span class="mainvalue">{{cpu.cpu_model}}</span>
                            </div>
                            <div class="list-group-separator-full"></div>
                            <div class="list-group-item">
                                <div class="item-title">cpu running status</div>
                                <b>cpu max usage {{cpu.cpu_max_usage}}</b>
                                <b>cpu mean usage {{cpu.cpu_mean_usage}}</b>
                                <b>cpu median usage {{cpu.cpu_median_usage}}</b>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>memory staus</b>
                    </div>
                    <div class="col-md-10">
                        <div class="list-group">
                            <div class="list-group-item">
                                <span class="mainvalue">statistic</span>
                            </div>
                            <div class="list-group-separator-full"></div>
                            <div class="list-group-item">
                                <div class="item-title">memory usage</div>
                                <b>memory max usage {{cpu.mem_max_usage}}</b>
                                <b>memory mean usage {{cpu.mem_mean_usage}}</b>
                                <b>memory median usage {{cpu.mem_median_usage}}</b>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            {% endif %}
            {% if gpu%}
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>gpu model</b>
                    </div>
                    <div class="col-md-10">
                        <div class="list-group">
                            <div class="list-group-item">
                                <span class="mainvalue">{{gpu.gpu_model}}</span>
                            </div>
                            <div class="list-group-separator-full"></div>
                            <div class="list-group-item">
                                <div class="item-title">gpu util</div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            {% endif %}
            {% for measure in measures %}
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>{{measure.statistic.name}}</b>
                    </div>
                    <div class="col-md-10">
                        {% for model_statistic_val in measure.statistic.value %}
                            {% if model_statistic_val.type == 'SCALAR' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.value}}</span>{% if model_statistic_val.interval %}{{model_statistic_val.interval}}{% endif %}
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                </div>
                            </div>
                            {% endif %}
                            {% if model_statistic_val.type == 'HISTOGRAM' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.name}}</span>
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                    <div id="{{model_statistic_val.name}}-dashboard"></div>
                                </div>
                            </div>
                            {% endif %}
                            {% if model_statistic_val.type == 'CURVE' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.name}}</span>
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                    <div id="{{model_statistic_val.name}}-dashboard"></div>
                                </div>
                            </div>
                            {% endif %}
                            {% if model_statistic_val.type == 'IMAGE' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.name}}</span>
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                    <div id="{{model_statistic_val.name}}-dashboard"></div>
                                </div>
                            </div>
                            {% endif %}
                            {% if model_statistic_val.type == 'MATRIX' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.name}}</span>
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                    <div id="{{model_statistic_val.name}}-dashboard"></div>
                                </div>
                            </div>
                            {% endif %}
                            {% if model_statistic_val.type == 'TABLE' %}
                            <div class="list-group">
                                <div class="list-group-item">
                                    <span class="mainvalue">{{model_statistic_val.name}}</span>
                                </div>
                                <div class="list-group-separator-full"></div>
                                <div class="list-group-item">
                                    <div id="{{model_statistic_val.name}}-dashboard" class="data-table"></div>
                                </div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
            </table>
        </div>
    </div>
</div>
<div class="container">
  <div class="evaltitle">
        <b>Significant Difference Analysis</b>
  </div>
  <div class="cardtable">
    <div class="cardtable">
      <div class="table-responsive">
        <table class="table" style="table-layout:fixed">
          <tbody>
          <tr class="cardrow">
            <td>
              <div class="col-md-2 evaltitle">
                <b> Model VS Benchmark</b>
              </div>
              <div class="col-md-10">
                 <div class="list-group">
                    <div class="list-group-item">
                      <span class="mainvalue">Performance Signicant Difference</span>
                    </div>
                   <div class="list-group-separator-full"></div>
                   <div class="list-group-item">
                     <div id="significant-diff-compare"></div>
                   </div>
                 </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="container">
    <div class="evaltitle">
        <b>Sample Statistic Analysis</b>
    </div>
    <div class="cardtable">
      <div class="table-responsive">
        <table class="table" style="table-layout:fixed">
            <tbody>
            {%for analysis_data in analysis%}
            <tr class="cardrow">
                <td>
                    <div class="col-md-2 evaltitle">
                        <b>{{analysis_data.name}}</b>
                    </div>
                    <div class="col-md-10">
                      <div class="list-group">
                          <div class="list-group-item" style="text-align:center">
                            <div id="{{analysis_data.name}}-matrix-table"></div>
                          </div>
                          <div class="list-group-separator-full"></div>
                          <div class="list-group-item">
                            {%for region_sampling in analysis_data.region_samplings%}
                            <div class="panel panel-default">
                                <div class="panel-heading" style="height:50px">
                                    <h3 class="panel-title">{{region_sampling.name}}</h3>
                                </div>
                                <div class="panel-body">
                                  {%for sampling in region_sampling.data%}
                                  {%if sampling.type=='IMAGE'%}
                                  <img src="{{sampling.data}}" class="img-rounded" width="64px" height="64px" name="{{sampling.flag}}">
                                  {%endif%}
                                  {%if sampling.type=='TEXT'%}
                                  <p>{{sampling.data}}</p>
                                  {%endif%}
                                  {%if sampling.type=='CURVE'%}
                                  {%endif%}
                                  {%endfor%}
                                </div>
                            </div>
                            {%endfor%}
                          </div>
                      </div>
                    </div>
                </td>
              </tr>
            {%endfor%}
            </tbody>
        </table>
      </div>
    </div>
</div>

<div class="container">
    <div class="evaltitle">
        <b>Sample Eye Analysis</b>
    </div>
    <div>
        {%for eye_measure in eye.eye_measures%}
        <div>{{eye_measure.NAME}}</div>
        <div id="{{eye_measure.NAME}}_error_analysis">
            <a href="javascript:void(0)" name="add_col"><span class="badge" style="float: left;position: absolute;margin-top: 25px;">+</span></a>
            <a href="javascript:void(0)" name="subtract_col"><span class="badge" style="float: left;position: absolute;margin-top: 47px;margin-left: 2px;">-</span></a>
            <a href="javascript:void(0)" name="add_row"><span class="badge" style="margin-left: 30px;">+</span></a>
            <a href="javascript:void(0)" name="subtract_row"><span class="badge">-</span></a>
            <table class="table table-striped eye_error_analysis" style="margin-left: 20px">
              <thead>
                <tr>
                    <!--sample index column 1-->
                  <th>#</th>
                    <!--sample content column 2-->
                  <th>DATA</th>
                    <!--sample tag column 3 ~ ...-->
                    {%for eye_tag in eye_measure.eye_tags%}
                    <th>{{eye_tag.NAME}}</th>
                    {%endfor%}
                    <!--sample GROUNDTRUTH column -2-->
                  <th>GROUNDTRUTH</th>
                    <!--sample comment column -2-->
                  <th>COMMENT</th>
                </tr>
              </thead>
              <tbody>
                {%for eye_sample in eye_measure.eye_samples%}
                <tr>
                    <!--sample index column 1-->
                    <td scope="row">{{eye_sample.ID}}-(score: {{eye_sample.SCORE}})</td>
                    <!--sample content column 2-->
                    {% if eye_sample.DATA_TYPE == 'IMAGE'%}
                    <td><img src="{{eye_sample.DATA}}" width="128" height="128" name="image_container"></td>
                    {% elif eye_sample.DATA_TYPE == 'AUDIO'%}
                    <td><audio src="{{eye_sample.DATA}}" controls="controls">Your browser does not support the audio element.</audio></td>
                    {% elif eye_sample.DATA_TYPE == 'VIDEO'%}
                    <td><video width="320" height="240" controls autoplay> <source src="{{eye_sample.DATA}}" type="video/mp4"> <object data="{{eye_sample.DATA}}" width="320" height="240"></object></video></td>
                    {% elif eye_sample.DATA_TYPE == 'STRING'%}
                    <td><p>{{eye_sample.DATA}}</p></td>
                    {% endif%}
                    <!--sample tag column 3 ~ ...-->
                    {%for eye_tag in eye_measure.eye_tags%}
                    {% if eye_tag.NAME in eye_sample.TAGS%}
                    <td col={{eye_tag.ID}}><input type=checkbox name=is_it checked="checked"></td>
                    {% else%}
                    <td col={{eye_tag.ID}}><input type=checkbox name=is_it></td>
                    {% endif%}
                    {%endfor%}
                    <!--sample GROUNDTRUTH column -2-->
                    {% if eye_sample.GT_TYPE == 'IMAGE'%}
                    <td><img src="{{eye_sample.GT}}" width="128" height="128" name="image_container"></td>
                    {% elif eye_sample.GT_TYPE == 'AUDIO'%}
                    <td><audio src="{{eye_sample.GT}}" controls="controls">Your browser does not support the audio element.</audio></td>
                    {% elif eye_sample.GT_TYPE == 'VIDEO'%}
                    <td><video width="320" height="240" controls autoplay> <source src="{{eye_sample.GT}}" type="video/mp4"> <object data="{{eye_sample.GT}}" width="320" height="240"></object></video></td>
                    {% elif eye_sample.GT_TYPE == 'STRING'%}
                    <td><p>{{eye_sample.GT}}</p></td>
                    {% endif%}
                    <!--sample comment column -1 -->
                    <td><input placeholder="COMMENT"></td>
                </tr>
                {%endfor%}
                <tr>
                   <td scope="row">STATISTIC</td>
                    <td>-</td>
                    {%for eye_tag in eye_measure.eye_tags%}
                    <td col="{{eye_tag.ID}}">0%</td>
                    {%endfor%}
                    <td>-</td>
                    <td>-</td>
                </tr>
              </tbody>
            </table>
            <div style="float: right; margin-top: -20px">
              <button name="error_analysis_btn" class="btn btn-default btn-white-to-blue" type="button">
                  save
              </button>
            </div>
        </div>
        {%endfor%}
    </div>
</div>
</body>
</html>