{% extends 'base.html' %}

{% block title %}
	{{ title }}
{%  endblock %}

{% block content %}
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">

		function getCities(elt) {

			console.log('In');

			$.get("/cities/" + elt.value, function(data) {

					var stores = jQuery.parseJSON(data); // Get data
					$('#cities').find('option').remove(); // Clear select

					for (var i = 0; i < stores.length; i++) // Add entries
						$("#cities").append("<option value='" + stores[i]+ "'>" + stores[i] + "</option>");

			});
		}
	</script>

	<form action="." method="post">
		{% csrf_token %}
		<label for="state">PROVINCE:</label>
		<select name="state" onchange="getCities(this);"">
			<option>Select a state</option>
			{% for store in store_label %}
				<option value="{{ store }}">{{ store }}</option>
			{% endfor %}
		</select>
		<label for="city">CITY/TOWN:</label>
		<select id="cities" name="city">
			<option>Select a city</option>
		</select>
		<input type="submit" value="Find">
	</form>

	{% for store in stores %}
		<div>{{ store.company_name }}</div>
		<div>{{ store.adress1 }}</div>
		<div>{{ store.city }}, {{ store.state }}</div>
		<div>{{ store.zip_code }}</div>
		<div>{{ store.phone_number }}</div>
	{% endfor %}

	{% if error != None %}
			<h2>{{ error }}</h2>
	{% endif %}

{%  endblock %}