{% extends "layout.html" %}
{% block body %}
    <form id="query">
    <p>
	<label>Location</label>
	<select id="deviceId" name="deviceId">
	    <option value="1">Bedroom</option>
	    <option value="2">Mainfloor</option>
	</select>
    </p>
    <p>
	<label>Graph Type</label>
	<select id="graph" name="graph">
	    <option value="htgraph.png">Humidity &amp; Temperature</option>
	    <option value="tgraph.png">Temperature</option>
	    <option value="hgraph.png">Humidity</option>
	    <option value="pgraph.png">Pressure</option>
	    <option value="bgraph.png">Battery</option>
	</select>
    </p>
    <p>
	<label>Start Date</label>
	<input type="date" name="sd" id="sd">
	<input type="time" name="st" id="st">
    </p>
    <p>
	<label>End Date</label>
	<input type="date" name="ed" id="ed">
	<input type="time" name="et" id="et">
    </p>
    </form>
    <button id='submit'>Submit</button>

    <figure>
	<embed id="figure" type="image/png" src="/htgraph.png?deviceId=2" />
    </figure>

    <script src="static/interactive.js"></script>
{% endblock %}