{% extends "base.html" %}
{% block title %}iSmartML{% endblock %}
{% block head %}
    	{{ super() }}
	<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
	//clears page cache
	$(window).bind("pageshow", function() {
	    var form = $('form'); 
	    // let the browser natively reset defaults
	    form[0].reset();
	}); 
        </script>



	<script>
	//toggle all
	function toggle_est(source) {
	    var checkboxes = document.querySelectorAll('div.estm input[type="checkbox"]');
	    for (var i = 0; i < checkboxes.length; i++) {
		if (checkboxes[i] != source)
		    checkboxes[i].checked = source.checked;
	    }
	}
	</script>


	<script>
	//toggle all
	function toggle_pre(source) {
	    var checkboxes = document.querySelectorAll('div.prep input[type="checkbox"]');
	    for (var i = 0; i < checkboxes.length; i++) {
		if (checkboxes[i] != source)
		    checkboxes[i].checked = source.checked;
	    }
	}
	</script>

	<script>
	//toggle all
	function toggle_features(source) {
	    var checkboxes = document.querySelectorAll('div.features input[type="checkbox"]');
	    for (var i = 0; i < checkboxes.length; i++) {
		if (checkboxes[i] != source)
		    checkboxes[i].checked = source.checked;
	    }
	}
	</script>



	<script>
	//checkbox checker, not using now
	$(document).ready(function(){
    		var requiredCheckboxes = $('.cl-checkbox :checkbox[required]');
    		requiredCheckboxes.change(function(){
        		if(requiredCheckboxes.is(':checked')) {
            			requiredCheckboxes.removeAttr('required');
       			 } else {
            			requiredCheckboxes.attr('required', 'required');
        		}
    		});
	});
	</script>
	



	<div id="header_bar">
	<img id="banner" src ="static/images/status/status4.svg">
     </div>
{% endblock %}

{% block content %}
<form method="post" action="" enctype="multipart/form-data">
    <dl>
	    	<div class="row">
		<div class="col-8" >
		<div id="cl_div" >
		<h4><p>Select Classifiers
		<i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Classifier is an algorithm that is used to learn the data and make predictions. Only selected classifiers will be considered for the optimization process.">
		</i>

		</p></h4>
		<input type="checkbox" onclick="toggle_est(this);" />&nbsp; Toggle all<br />
		<p>
		<div class="form-check estm">
		{% for cl in ESTIMATORS[0] %}
			<nobr>
			{%if loop.index0 in BOLD_CL %}
	    		<input type="checkbox" name="estim_ls" value="{{cl}}" checked > 
			<strong><label>{{ESTIMATORS[1][loop.index0]}} &nbsp; &nbsp; </label></strong>
			{% else %}
	    		<input type="checkbox" name="estim_ls" value="{{cl}}" > 
	    		<label>{{ESTIMATORS[1][loop.index0]}} &nbsp; &nbsp;  </label>
			{% endif %}
			</nobr>
		{% endfor %}
		</div>
		</p>
		<h4><p>Select Preprocessors
		<i class="fa fa-question-circle" data-toggle="tooltip" data-placement="top" title="Preprocessing is performed on the data before it is fed to the classifier or regressor. It is an attempt to transform data in more fitted form for training. Only selected preprocessors will be considered for the optimization process.">
		</i>

		</p></h4>
		<input type="checkbox" onclick="toggle_pre(this);" />&nbsp; Toggle all<br />
		<p>
		<div class="form-check prep" >
		{% for pr in PREPROCESSORS[0] %}
	    		<nobr>
			{% if pr == "no_preprocessing" %}
			<input type="checkbox" name="prep_ls" value="{{pr}}" checked >
			{% else %}
			<input type="checkbox" name="prep_ls" value="{{pr}}"  >
			{% endif %}
			<label>{{PREPROCESSORS[1][loop.index0]}} &nbsp; &nbsp; </label>
			</nobr>
		{% endfor %}
		</div>
		</p>


		
		</div>
		</div>



		
		{% if TASK=="classification" %}
		<div class="col"  style="padding-right:20px; border-left: 1px solid #ccc;">
	    	<div id="meta_data" >
	    	<h3>
			Meta Data Reccomendation: {{REC}}
		</h3>
		{% include "base_results.html" %}
		</div>
		</div>
		{% endif %}

		</div>	
		
    </dl>
    <p>
		<button type="submit" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModalCenter" >Next</button>
	</p>
</form>

{% endblock %}