filters.html

---
layout: default
title: Filters, Food Oasis Los Angeles
canonical_url: /filters/
include_header: false
include_footer: false
---

<form action="/locations/" method="get" id="search-form">
	<header class="header">
		<div class="filter-nav">
			<h1>Filters</h1>

			<p><a href="/locations/" onclick="history.back();">Cancel</a></p>
			<p><button type="submit">Done</button></p>
		</div>
	</header>

	{% comment %}

	TODO: Add a filter for open hours

	<fieldset>
		<legend>Hours</legend>

		<p>
			<label>
				Open Now
				<input type="checkbox" disabled="disabled" />
			</label>
		</p>

		<h3>Open At</h3>
		<select disabled="disabled">
			<option>Anytime</option>
			<option>5am – 6am</option>
			<option>6am – 7am</option>
			<option>7am – 8am</option>
			<option>8am – 9am</option>
			<option>10am – 11am</option>
			<option>11am – noon</option>
			<option>noon – 1pm</option>
			<option>1pm – 2pm</option>
			<option>2pm – 3pm</option>
			<option>4pm – 5pm</option>
			<option>5pm – 6pm</option>
			<option>6pm – 7pm</option>
			<option>7pm – 8pm</option>
			<option>8pm – 9pm</option>
			<option>9pm – 10pm</option>
		</select>
		<!-- TBD:
		<input type="text" value="2pm" />
		-->

		<select disabled="disabled">
			<option>Any Day</option>
			<option>Sunday</option>
			<option>Monday</option>
			<option>Tuesday</option>
			<option>Wednesday</option>
			<option>Thursday</option>
			<option>Friday</option>
			<option>Saturday</option>
		</select>

		<!--
		TODO: Make a button that looks like a checkbox, that resets the “anytime” and “any day” select elements.
		<input type="checkbox" />
		-->
	</fieldset>
	{% endcomment %}

	<fieldset>
		<legend>Hours</legend>
		<ul>
			<li>
				<label>
					<span>Open Now</span>
					<input type="checkbox" name="open" value="1" />
					<span class="pseudo-checkbox"></span>
				</label>
			</li>
		</ul>
	</fieldset>

	<fieldset>
		<legend>Types</legend>
		<ul>
			<li>
				<label>
					<img src="/assets/images/home/food-pantry.svg" width="100" alt="" />
					<span class="classification" style="color: rgb(249, 192, 88); /* @canteloupe */">Free</span><br />
					<span class="option">Food Pantries</span>
					<input type="checkbox" data-name="type_option" value="food-pantry" checked="checked" />
					<span class="pseudo-checkbox"></span>
				</label>
			</li>
			<li>
				<label>
					<img src="/assets/images/home/community-garden.svg" width="100" alt="" />
					<span class="classification" style="color: rgb(144, 194, 70); /* @lime */">Grow</span><br />
					<span class="option">Community Gardens</span>
					<input type="checkbox" data-name="type_option" value="community-garden" checked="checked" />
					<span class="pseudo-checkbox"></span>
				</label>
			</li>
			<li>
				<label>
					<img src="/assets/images/home/farmers-market.svg" width="100" alt="" />
					<span class="classification" style="color: rgb(241, 95, 91); /* @strawberry */">Buy</span><br />
					<span class="option">Farmers Markets</span>
					<input type="checkbox" data-name="type_option" value="farmers-market" checked="checked" />
					<span class="pseudo-checkbox"></span>
				</label>
			</li>
			<li>
				<label>
					<img src="/assets/images/home/grocery-store.svg" width="100" alt="" />
					<span class="classification" style="color: rgb(241, 95, 91); /* @strawberry */">Buy</span><br />
					<span class="option">Supermarkets</span>
					<input type="checkbox" data-name="type_option" value="supermarket" checked="checked" />
					<span class="pseudo-checkbox"></span>
				</label>
			</li>
		</ul>
	</fieldset>

	<fieldset>
		<legend>Research Data</legend>
		<ul>
			<li>
				<label>
					<span>Food Deserts</span>
					<input type="checkbox" name="deserts" value="1" checked="checked" />
					<span class="pseudo-checkbox"></span><br /><br />
					<i>Food Deserts are low-income areas without easy access to healthy food.</i>
				</label>
			</li>
		</ul>
	</fieldset>

	<p class="action reset">
		<button type="reset">Reset</button>
	</p>

	<input type="hidden" name="address" />
	<input type="hidden" name="type" />
</form>

<script src="/assets/js/search.js"></script>