{% extends "layout.html" %}

{% macro input_text(id, labeltext) -%}
  <div id="input_field_for_{{id}}" class="input-field" xmlns:p="http://www.w3.org/1999/html">
    <input id="{{id}}" name="{{id}}" type="text" class="validate" />
    <label for="{{id}}">{{labeltext}}</label>
  </div>
{%- endmacro %}

{% macro input_text_pat(id, labeltext, pattern) -%}
  <div id="input_field_for_{{id}}" class="input-field">
    <input id="{{id}}" name="{{id}}" type="text" class="validate" pattern="{{pattern}}"/>
    <label for="{{id}}">{{labeltext}}</label>
  </div>
{%- endmacro %}

{% macro input_text_req(id, labeltext) -%}
  <div id="input_field_for_{{id}}" class="input-field">
    <input id="{{id}}" name="{{id}}" type="text" class="validate" required />
    <label for="{{id}}">{{labeltext}}<sup>*</sup></label>
  </div>
{%- endmacro %}

{% macro input_text_req_pat(id, labeltext, pattern) -%}
  <div id="input_field_for_{{id}}" class="input-field">
    <input id="{{id}}" name="{{id}}" type="text" class="validate" required pattern="{{pattern}}" />
    <label for="{{id}}">{{labeltext}}<sup>*</sup></label>
  </div>
{%- endmacro %}

{% macro checkbox(id, text) -%}
  <p id="checkbox_for_{{id}}">
    <label>
      <input type="checkbox" id="{{id}}" name="{{id}}" />
      <span>{{text}}</span>
    </label>
  </p>
{%- endmacro %}
{% macro section(title) -%}
  <h5>{{ title }}</h5><hr/>
{%- endmacro %}

{% block content %}
  <form action="/process_recipe" method="POST">
    {{ section("Name und Beschreibung") }}
    {{ input_text_req("recipe_name", "Rezeptname") }}
    {{ input_text("description", "Kurzbeschreibung") }}
    <div id="input_field_for_additional_text" class="input-field">
      <textarea id="additional_text" name="additional_text" class="materialize-textarea"></textarea>
      <label for="additional_text">Lange Beschreibung</label>
    </div>

    {{ section("Zutaten") }}
    {{ input_text_req_pat("servings", "Anzahl Portionen", "[0-9]+([-][0-9]+)?") }}
    <div id="input_fields_for_ingredients" class="container">
      <div class="row">
        <div class="col s1">
          <input class="center-align validate" type="text" name="amount[]" id="first_amount" />
          <label for="first_amount" class="center-align">Menge</label>
        </div>
        <div class="col s1">
          <input class="center-align validate" type="text" name="measure[]" id="first_measure" />
          <label for="first_measure" class="center-align">Maß</label>
        </div>
        <div class="col s10">
          <input class="validate" type="text" name="ingredient[]" id="first_ingredient" />
          <label for="first_ingredient">Zutat</label>
        </div>
      </div>
      <button id="add_ingredients_button" class="btn-small right" type="button" onclick="add_more_ingredients()">
        <i class="material-icons">add</i>
      </button>
    </div>
    <br>
    {{ section("Zubereitung") }}
    <div id="input_field_for_preparation_time">
      {{ input_text_pat("preparation_time", "Zubereitungszeit in Minuten", "[0-9]*") }}
    </div>
    <div id="input_fields_for_preparation" class="row">
      <div>
        <input type="text" name="preparation[]" id="first_preparation" class="validate" required />
	<label for="first_preparation">Zubereitungsschritte<sup>*</sup></label>
      </div>
      <button id="add_preparation_button" class="btn-small right" type="button" onclick="add_more_preparation()">
        <i class="material-icons">add</i>
      </button>
    </div>

    {{ section("Ernährungskategorie") }}
    {{ checkbox("contains_meat_or_meat_products", "Enthält Fleisch oder Fleischprodukte") }}
    {{ checkbox("contains_fish", "Enthält Fisch") }}
    {{ checkbox("contains_animal_products", "Enthält tierische Produkte") }}
    {{ input_text("source", "Quelle") }}

    <button class="btn waves-effect waves-light">
      Rezept speichern
      <i class="material-icons left">send</i>
    </button>
  </form>
  <br>
{% endblock %}

{% block scripts %}
  <script type="text/javascript" src="/static/js/new_recipe.js"></script>
{% endblock %}