{% macro switch(label, id, on) -%}
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col">
        {{ label }}:
    </div>
    <div class="mdl-cell mdl-cell--8-col">
        <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="{{ id }}">
            <input type="checkbox" id="{{ id }}" name="{{ id }}" class="mdl-switch__input" {% if on %}checked{% endif %}>
          <span class="mdl-switch__label"></span>
        </label>
    </div>
</div>
{% endmacro %}

{% macro text_input(label, id, value) -%}
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--middle">
        {{ label }}:
    </div>
    <div class="mdl-cell mdl-cell--8-col mdl-cell--middle">
          <div>
              <input class="mdl-textfield__input" type="text" name="{{ id }}" value="{{ value }}">
              <label class="mdl-textfield__label" for="{{ id }}"></label>
        </div>
    </div>
</div>
{% endmacro %}

{% macro numeric_input(label, id, value) -%}
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--middle">
        {{ label }}:
    </div>
    <div class="mdl-cell mdl-cell--8-col mdl-cell--middle">
        <div>
            <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" name="{{ id }}" value="{{ value }}">
            <label class="mdl-textfield__label" for="{{ id }}"></label>
            <span class="mdl-textfield__error">Input is not a number!</span>
        </div>
    </div>
</div>
{% endmacro %}

{% macro list_input(label, id, value) -%}
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--middle">
        {{ label }}:
    </div>
    <div>
          <div class="">
              <input class="mdl-textfield__input" type="text" name="{{ id }}" value="{{ value|join(', ') }}">
              <label class="mdl-textfield__label" for="{{ id }}"></label>
        </div>
    </div>
</div>
{% endmacro %}

{% macro dropdown(label, id, possible_values, current) -%}
<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--4-col mdl-cell--middle">
        {{ label }}:
    </div>
    <div class="mdl-cell mdl-cell--8-col mdl-cell--middle">
		<div class="mdl-selectfield">
            <select class="browser-default" name="{{ id }}">
                {% if possible_values %}
				{% for value, name in possible_values %}
                <option value="{{ value }}" {% if current == value %}selected="selected"{% endif %}>{{ name }}</option>
				{% endfor %}
                {% endif %}
			</select>
		</div>
    </div>
</div>
{% endmacro %}

{% macro submit() -%}
<input type="submit" value="Submit" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
{% endmacro %}
