{% extends "app_layout.html" %}

{% block header_title %}
Rainfall stations
{% endblock %}

{% block title %}
Rainfall stations
{% endblock %}

{% block content %}

<p>
    <form>
        <div class="floating-block">
            <p class="form">
                <label>Station ID:</label>
                <input type="text" name="station_id" value="{{ query.station_id }}"/>
            </p>
        </div>
        <div class="floating-block">
            <p class="form"></p>
                <label>Station name:</label>
                <input type="text" name="station_name" value="{{ query.station_name }}" /> 
                <br />
            </p>
        </div>
        <div class="floating-block">
            <p class="form"></p>
                <label>Nearest to well ID:</label>
                <input type="text" name="nearest_to_well" value="{{ query.nearest_to_well }}" /> 
                <br />
            </p>
        </div>
        <br>
        <input type="reset">
        <button type="submit" formaction="/app/rainfall_stations">
            Load
        </button>
    </form>
</p>


    {{ table|safe }}

{% endblock %}