{%- extends "base.html" %}

{# Loads some of the macros included with Flask-Bootstrap. We are using the
   utils module here to automatically render Flask's flashed messages in a
   bootstrap friendly manner #}
{% import "bootstrap/utils.html" as utils %}

{% block scripts %}
{{super()}}
<script>
$("#setpoint").slider({
    tooltip: 'always'
});
</script>
{%- endblock scripts %}

{# Most of the content goes in this block #}
{% block content %}
  <div class="container">
  {%- with messages = get_flashed_messages(with_categories=True) %}
  {%- if messages %}
    <div class="row">
      <div class="col-md-12">
        {{utils.flashed_messages(messages)}}
      </div>
    </div>
  {%- endif %}
  {%- endwith %}
    <div class="jumbotron">
      <h1>Heater</h1>
      <h2>Status</h2>
      <p>Current Temperature: {{ tempC }}</p>
      <p>Heater Status: {{ state.heater }}</p>
      <button type="button" class="btn btn-success" onclick="location.reload(true)">Reload</button>
      <h2>Control</h2>
      <form method="POST" action="{{ url_for('.index') }}" role="form">
      <p>
	   Heater
	   <!-- {{ form.run() }} -->
           <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-primary {%- if settings.run == "off" %} active {%- endif %}">
		      <input id="run-0" type="radio" name="run" value="off" autocomplete="off" {%- if settings.run == "off" %} checked {%- endif %}>Off
              </label>
	      <label class="btn btn-danger {%- if settings.run == "cont" %} active {%- endif %}">
		      <input id="run-1" type="radio" name="run" value="cont" autocomplete="off" {%- if settings.run == "cont" %} checked {%- endif %}>Continuous
             </label>
	     <label class="btn btn-success {%- if settings.run == "auto" %} active {%- endif %}">
		      <input id="run-2" type="radio" name="run" value="auto" autocomplete="off" {%- if settings.run == "auto" %} checked {%- endif %}>Auto
             </label>
           </div>
      </p>
      <p>
              Setpoint (&deg;C):&nbsp;
	      <input id="setpoint" name="setpoint" data-slider-id='setpointSlider' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="0.5" data-slider-value="{{ settings.setpoint }}" />
          </p>
      <p>
           Heat
	   <!-- {{ form.elements() }} -->
           <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-warning {%- if settings.elements == "low" %} active {%- endif %}">
		      <input id="elements-0" type="radio" name="elements" value="low" autocomplete="off" {%- if settings.elements == "low" %} checked {%- endif %}>Low
              </label>
	      <label class="btn btn-danger {%- if settings.elements == "high" %} active {%- endif %}">
		      <input id="elements-1" type="radio" name="elements" value="high" autocomplete="off" {%- if settings.elements == "high" %} checked {%- endif %}>High
             </label>
	     <label class="btn btn-success {%- if settings.elements == "auto" %} active {%- endif %}">
		      <input id="elements-2" type="radio" name="elements" value="auto" autocomplete="off" {%- if settings.elements == "auto" %} checked {%- endif %}>Auto
             </label>
           </div>
      </p>
      <p>
	      <button type="submit" class="btn btn-default">Save Settings</button>
      </p>
      </form>
    </div>
{%- endblock %}