{% extends 'base.html' %}

{% load i18n %}

{% 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) {

			$.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">{% trans "PROVINCE:" %}</label>
		<select name="state" onchange="getCities(this);">
			<option>{% trans "Select a state" %}</option>
			{% for store in store_label %}
				<option value="{{ store }}">{{ store }}</option>
			{% endfor %}
		</select>
		<label for="city">{% trans "CITY/TOWN:" %}</label>
		<select id="cities" name="city">
			<option>{% trans "Select a city" %}</option>
		</select>
		<input type="submit" value="{% trans 'Find' %}">
	</form>

	{% for store in stores %}
		<div>{{ store.company_name }}</div>
		<div>{{ store.adress1 }}</div>
		<div>{{ store.city_fr }}, {{ store.state_fr }}</div>
		<div>{{ store.zip_code }}</div>
		<div>{{ store.phone_number }}</div>
		<div>{{ store.website }}</div>
	{% endfor %}

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

{%  endblock %}