{% extends "base.html" %}
{% block title %}Running{% endblock %}
{% block head %}
    	{{ super() }}
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(function () { 
                //$("#content").load("/run_optimize"); 
		    window.location.replace("{{url_mod('progress')}}"+"?iter={{turn}}");
            });
        </script>
	<script> 
	var t=0.0;
	var per={{RAW_PERIOD|int}}
	var x = setInterval(function() { 
  	var elem = document.getElementById("bar1");   
	//var now = new Date().getTime(); 
	t+=1; 
	var days = Math.floor(t / ( 60 * 60 * 24)); 
	var hours = Math.floor((t%(60 * 60 * 24))/( 60 * 60)); 
	var minutes = Math.floor((t % (60 * 60)) / ( 60)); 
	var seconds = Math.floor((t % ( 60)) ); 

	elem.style.width = Math.floor(100*t/per) + '%'; 
	
	if(minutes<1){
	document.getElementById("timer").innerHTML = 
			 seconds + "s "; 
	}

	else if(hours<1){
	document.getElementById("timer").innerHTML =  
			 minutes + "m " + seconds + "s "; 
	}

	else if(days<1){
	document.getElementById("timer").innerHTML =   
			 hours + "h " + minutes + "m " + seconds + "s "; 
	}
	else{
	document.getElementById("timer").innerHTML = days + "d "  
			+ hours + "h " + minutes + "m " + seconds + "s "; 
	}
	}, 1000); 
	</script> 
	
	<script>
	$(document).ready(function(){
	    $(".est_col").click(function(){
	       //$("#smote_params").slideDown();
		a="#tb_"+$(this).attr('id').slice(4);
	       b=$(a).attr('id');
		console.log(b)
	       $(a).slideToggle();
	    });

	});
	</script>

	<div id="header_bar">
	<img id="banner" src ="static/images/status/status6.svg">
     </div>




{% endblock %}
{% block content %}
	    <div id="content">
		    <h1>Running {{task}} task for {{time}} seconds... {{turn+1}}/{{iters}}</h1>
		    <h1><span>Current Period: </span><span id="timer"></span><span>/{{PERIOD}}</span></h1>
		    </p>
		    <div id="progress1" class="w-75">
  		    <div id="bar1"></div>
                    </div>
		    </p>
		    {% block stop_button %}
		    <button type="button" class="btn btn-primary" value=Cancel name="Cancel"  data-toggle="modal" data-target="#exampleModalCenter" onclick="window.location.replace('{{ url_for( 'start' )}}');">
                    Cancel
                   </button>
		   {% endblock %}
	           </div>



{% endblock %}