{% extends "layout.html" %}

{% block body %}

<script>
$(document).ready(function () {
	
	enableGo();
	
    function initLink() {
        sel_reg = $("#region").val();
        sel_var = $("#dataset").val();
        link = "/"+sel_reg+"&"+sel_var
        $("#go").attr('href', link);
    }
    
    $("#region").change(function() {
        initLink();
        enableGo();
    });
    $("#dataset").change(function() {
        initLink();
        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="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <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" rel="home" href="#" title="poets°">
                <img style="max-width:100px; margin-top: -7px;"
                     src="{{ url_for('static', filename='poets_logo_white_32.png') }}">
            </a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="/">Home</a></li>
              <li><a href="{{ url_for('about') }}">About</a></li>
            </ul>
          </div><!--/.nav-collapse -->
      </div>
    </div>

<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 }}" >{{ region }}</option>
			        {% endfor %}
			</select>
		</div>
		<div class="form-group">
			<label class="sr-only" for="dataset">Datasets</label>
			<select class="form-control" id="dataset">
			    <option value=''>DATASETS</option>
			    {% for var in variables %}
			      <option value="{{ var }}" >{{ var }}</option>
			    {% endfor %}
			</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 %}