<!DOCTYPE html>
<html>
<head>
  <link href="{{ tyyli }}" rel="StyleSheet" type="text/css"/>
  <title>Ostoskori</title>
</head>
<body>
<h1>Ostoskori</h1>
<form accept-charset="UTF-8" action="kori.cgi" method="post">
<p>
<label>Lisää tuote <input name="tuote" type="text" value=""/></label>
<label>Hinta <input name="hinta" type="text" value="10"/></label>
<label>Lukumäärä <input name="lkm" type="text" value="1"/></label>
<!-- Tässä on JSON-serialisoituna tallessa kaikki aiemmin lisätyt tuotteet  -->
<input type="hidden" name="tuotteet" value="{{ tallenna }}" />
</p>
<p><input type="submit" value="Lisää"/></p>
</form>

{% if tuotteet|length > 0 %}

<h2>Tuotteet</h2>
    {% for tuote in tuotteet %}
        {# Ei mielellään käytetä GET-metodia eli lisätä suoraan urlissa olevien parametrien avulla  #}
        {# Myös jo aiemmin lisätyt tuotteet pitää muistaa kuljettaa mukana. Vrt. ylempi lomake  #}
        <p>{{ tuote }} <a href="?tuotteet={{tallenna}}&amp;lisaa={{tuote.id}}">Lisää</a></p>
        
        {# Sama kuin edellä mutta toteutettuna lomakkeena ja POST-metodilla. GET-metodilla toimisi identtisesti ylläolevan linkin kanssa #}
        <form action="kori.cgi" method="post">{{ tuote }} <button type="submit" name="lisaa" value="{{tuote.id}}">Lisää</button><input type="hidden" value="{{tallenna}}" name="tuotteet" /></form>
        {% endfor %}

{% endif %}

<h2>Debug</h2>

<pre>
JSON: {{ tallenna }}
Python: {{ tuotteet }}
</pre>
</body>
</html>
