{% extends "layout.html" %}

{% block url %}
	{% if url == None %}
	    #
	{% else %}
	    {{ url }}
	{% endif %}
{% endblock %}

{% block body %}

<script>
$(document).ready(function () {
	
	ts = new poetsViewer('', '{{host}}', {{port}}, '{{url}}');
	enableGo();
	
	path = ts.trimSlash(window.location.pathname)
    
    $("#region").change(function() {
    	ts.setVarSelect();
        ts.initLink(path);
        enableGo();
    });
    $("#dataset").change(function() {
        ts.initLink(path);
        enableGo();
    });
    
    function enableGo() {
        if ($("#region").val() == '') {
            $("#go").attr('disabled', 'disabled');
        }
        else if ($("#dataset").val() == '') {
        	$("#go").attr('disabled', 'disabled');
        } else {
            $("#go").removeAttr('disabled');
        }
    }
    
});
</script>

<div class="jumbotron" align="center">
    <h2>Welcome to the poets° data viewer!</h2>
    <p>Select a Region and Datataset to start...</p>
	<form class="form-inline" role="form">
	    <div class="form-group">
	        <label class="sr-only" for="region">Regions</label>
	        <select class="form-control" id="region">
		        <option value=''>REGION</option>
			        {% for region in regions %}
			          <option value="{{ region['code'] }}" >{{ region['name'] }}</option>
			        {% endfor %}
			</select>
		</div>
		<div class="form-group">
			<label class="sr-only" for="dataset">Datasets</label>
			<select class="form-control" id="dataset">
			    <option value=''>SELECT REGION FIRST</option>
			</select>
		</div>
		<a href='' class='btn btn-primary btn-lg' id="go"><span class="glyphicon glyphicon-chevron-right"></span> GO</a>
	</form>
	{% if error %}
    <br><br>
    <div class="alert alert-danger" role="alert">
    	<p class="error">
	  		<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
	  		<span class="sr-only">Error:</span>
	  		<strong>Error:</strong> {{ error }}
	  	</p>
    </div>
  	{% endif %}
</div>



{% endblock %}
