{{ block title }}Title{{ endblock }}
{{ block content }}

<p id="notification">
Please wait until the next revision opportunity, Your next opportunity will arrive in {{player.revision}} seconds.
</p>
<br>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
    .con {
        display: flex;
    }
</style>
<style>
.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}
.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}
</style>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
<script>
    all_data = [];
    var p1_data = js_vars.p1_act.split(",").map(Number);
    var p2_data = js_vars.p2_act.split(",").map(Number);
    var p3_data = js_vars.p3_act.split(",").map(Number);
    var p4_data = js_vars.p4_act.split(",").map(Number);
    
    for (var i = 0; i < js_vars.sub_count; i++) {
        tmp_data1 = [];
        tmp_data2 = [];
        tmp_data3 = [];
        tmp_data4 = [];
        for (var j = 0; j < i; j++) {
            tmp_data1[j] = null;
            tmp_data2[j] = null;
            tmp_data3[j] = null;
            tmp_data4[j] = null;
        }
        tmp_data1[i] = p1_data[i]
        tmp_data1[i+1] = p1_data[i]
        tmp_data2[i] = p2_data[i]
        tmp_data2[i+1] = p2_data[i]
        tmp_data3[i] = p3_data[i]
        tmp_data3[i+1] = p3_data[i]
        tmp_data4[i] = p4_data[i]
        tmp_data4[i+1] = p4_data[i]
        all_data[(i * 4) + 0] = {data : tmp_data1}
        all_data[(i * 4) + 1] = {data : tmp_data2}
        all_data[(i * 4) + 2] = {data : tmp_data3}
        all_data[(i * 4) + 3] = {data : tmp_data4}
    }
    
    if (js_vars.current_round == 1) {
        for (var i = 0; i < 60; i++) {
            tmp_data1 = [];
            tmp_data2 = [];
            tmp_data3 = [];
            tmp_data4 = [];
            for (var j = 0; j < i; j++) {
                tmp_data1[j] = null;
                tmp_data2[j] = null;
                tmp_data3[j] = null;
                tmp_data4[j] = null;
            }
            tmp_data1[i] = p1_data[0]
            tmp_data1[i+1] = p1_data[0]
            tmp_data2[i] = p2_data[0]
            tmp_data2[i+1] = p2_data[0]
            tmp_data3[i] = p3_data[0]
            tmp_data3[i+1] = p3_data[0]
            tmp_data4[i] = p4_data[0]
            tmp_data4[i+1] = p4_data[0]
            all_data[(i * 4) + 0] = {data : tmp_data1, dashStyle: 'dash'}
            all_data[(i * 4) + 1] = {data : tmp_data2, dashStyle: 'dash'}
            all_data[(i * 4) + 2] = {data : tmp_data3, dashStyle: 'dash'}
            all_data[(i * 4) + 3] = {data : tmp_data4, dashStyle: 'dash'}
        }
    }
    
    Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00']
});
    const chart = Highcharts.chart('container', {
        legend: {
        enabled: false
    },

    title: {
        text: 'Your action is in ' + js_vars.mycol
    },
    
    accessibility: {
        enabled: false
    },
        
    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 0 to ' + String(js_vars.max_time)
        },
        max: 60
    },
    
    yAxis: {
        floor: 0,
        ceiling: 5,
        min: 0,
        max: 5
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false,
                enabled: false
            },
            pointStart: 0,
            enableMouseTracking: false,
            marker: {
                enabled: false
            }
        }
    },

    series: all_data,

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            }
        }]
    }

});
</script>
<button class="otree-btn-next btn btn-primary" style="display: none;">Next</button>
<script>
    setTimeout(function(){document.getElementsByClassName("otree-btn-next btn btn-primary")[0].style.display = "block";document.getElementById("notification").textContent = "The revision opportunity has arrived, click Next to continue.";}, js_vars.period * 1000);
</script>

{{ endblock }}