{% extends "layout.html" %}
{% block head %}
    <!-- js import -->
    <script type="text/javascript" src="/static/js/jquery.lightbox-0.5.min.js"></script>
    <!-- stylesheet import -->
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.lightbox-0.5.css" media="screen" />
{% endblock %}
{% block content %}
    <h1>{{ title  }}</h1>
   <form action="/addentry" method=post class=add-entry>
   <div class=nameofaliment>
	Choose the database:
	<select name="database">
	            <option value="nutrition">nutrition</option>
		    <option value="activity">activity</option>
	 </select>
        Name:
        <input type=text size=10 name=title maxlength=21 value='{{entry[0]}}'>
	<input type=submit value='show values' name=show>
   </div>
   <div class=div0>
   <div class=div1>
      <dl>
	</br>
        <dt>water (g/100g):
        <dd><input type=text size=5 name=water value={{entry[1]}}>
        <dt>sugar (g/100g) :
        <dd><input type=text size=5 name=energie value={{entry[2]}}>
        <dt>protein (g/100g):
        <dd><input type=text size=5 name=protein value={{entry[22]}}>
      </dl>
    </div>
    <div class=div2>
      <dl>
        <dt>calcium (mg/100g):
        <dd><input type=text size=5 name=calcium value={{entry[3]}}>
        <dt>iron (mg/100g):
        <dd><input type=text size=5 name=iron value={{entry[4]}}>
        <dt>magnesium (mg/100g):
        <dd><input type=text size=5 name=magnesium value={{entry[5]}}>
        <dt>phosphorus (mg/100g):
        <dd><input type=text size=5 name=phosphorus value={{entry[6]}}>
        <dt>potassium (mg/100g):
        <dd><input type=text size=5 name=potassium value={{entry[7]}}>
      </dl>
    </div>
    <div class=div3>
      <dl>
        <dt>sodium (mg/100g):
        <dd><input type=text size=5 name=sodium value={{entry[8]}}>
        <dt>zinc (mg/100g):
        <dd><input type=text size=5 name=zinc value={{entry[9]}}>
        <dt>copper (mg/100g):
        <dd><input type=text size=5 name=copper value={{entry[10]}}>
        <dt>vitamine C (mg/100g):
        <dd><input type=text size=5 name=vit_c value={{entry[11]}}>
        <dt>thiamin (mg/100g):
        <dd><input type=text size=5 name=thiamin value={{entry[12]}}>
      </dl>
    </div>
    <div class=div4>
      <dl>
        <dt>riboflavin (mg/100g):
        <dd><input type=text size=5 name=riboflavin value={{entry[13]}}>
        <dt>niacin (mg/100):
        <dd><input type=text size=5 name=niacin value={{entry[14]}}>
        <dt>pantoacid (mg/100g):
        <dd><input type=text size=5 name=panto_acid value={{entry[15]}}>
        <dt>vitamine B6 (mg/100g):
        <dd><input type=text size=5 name=vit_b6 value={{entry[16]}}>
        <dt>folate (μg/100g):
        <dd><input type=text size=5 name=folate_tot value={{entry[17]}}>
      </dl>
    </div>
    <div class=div5>
      <dl>
        <dt>vitamine B12 (μg/100g):
        <dd><input type=text size=5 name=vit_b12 value={{entry[18]}}>
        <dt>vitamine A (μ/100g):
        <dd><input type=text size=5 name=vit_a value={{entry[19]}}>
        <dt>vitamine E (μg/100g):
        <dd><input type=text size=5 name=vit_e value={{entry[20]}}>
        <dt>vitamine D (μg/100g):
        <dd><input type=text size=5 name=vit_d value={{entry[21]}}>
        <dt>Choose a category:
	<select name="scenario">
		    <option value="{{entry[23]}}" selected>{{entry[23]}}</option>
	            <option value="fruits">fruits/vegetables</option>
		    <option value="meatcounter">meatcounter</option>
  		    <option value="fridge">fridge</option>
		    <option value="rack">rack</option>
	 </select>
    </div>
    <div id=toCheck>
	<input type=submit value='insert entry to database' name=insert>
	<input type=submit value='delete entry from database' name=delete>
	<input type=submit value='modify entry in database' name=modify>
    </div>
</form>
</div>

  <script type="text/javascript">
    $(".div0 input").blur(function() {
	var value = $(this).val();
	$(this).css("color","black");
	if(!(value.length === 0)){
	   var numericExpression = /^[0-9.]+$/;
	   if(!value.match(numericExpression)){
	   $(this).css("color","red");
	}}
     });
  </script>

<p></p>

  <!--{% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}-->

  <ul class=entries>
  {% for e in entries %}
    <li>{{ e.title }}
  {% else %}
    <li><em>No entries here so far</em>
  {% endfor %}
  </ul>

{% endblock %}