<html>
   <head>
      <title>Recipes: {{ r.title }} - Gourmet Recipe Manager - Web View</title>
      <style type="text/css">
         {%include "menu.css" %}
         #my_multiply_form p {display: inline}
         #id_multiplier {width: 3em}
         #id_yields {width: 5em}
         #ingredients_container {position: absolute; top: 5em; right: 2em;
         border: 1px dashed #888; padding-top: 0em;
         width: 35%}
         #ingredients_container h2 {background-color: #000; color: #ccc; margin: 0em; padding: 5px; text-align: center}
         #my_multiply_form {background-color: #ccc; width: 300px; border: 1px dashed #000; padding: 1em}
         #hide_multiplier {text-align: right; float: right; margin: 0; padding: 0}
         #ingredients ul {padding-left: 1em; margin-left: 0em}
         #ingredients li {list-style-type: none; padding-left: 0em; margin-left: 0em}
         #attrs {width: 60%}
         #recimage {max-width: 60%; display: block}
         #text {width: 60%}
      </style>
      <script type="text/javascript" src="/js/jquery.js"></script>
      <script type="text/javascript">
         function do_multiply (event){
             event.preventDefault();
              $.ajax({
               type: "POST",
         url: "/rec/multiply_xhr/",
               dataType:"json",
         data: $("#my_multiply_form").serialize(),
               success: function (data){
                $("#ingredients").html("");
                /* var new_ingredients = "<ul>"; */
         for (row in data.ingredients) {
              if (data.ingredients[row][0] ) {
              $("#ingredients").append("<h3>"+data.ingredients[row][0]+"</h2>");}
              for (i in data.ingredients[row][1]) {
                 $("#ingredients").append("<br>"+data.ingredients[row][1][i]);
              }
                 }
                 $("#yields").html(data.yields);
                 $("#mult").html("(x"+data.multiplier+")");
                 $("#shoprec").attr("href",
                                    "/shop/{{r.id}}/"+data.multiplier);
                 $("#shoplink").html("<a href='/shop/{{r.id}}/"+data.multiplier+"'>Add to Shopping List</a>");
                 }
             });
         }
         function show_multiplier (event){
           event.preventDefault();
           $("#my_multiply_form").attr("style","display:block");
           $("#show_multiplier").attr("style","display:none");
         }
         function hide_multiplier (event){
           event.preventDefault();
           $("#my_multiply_form").attr("style","display:none");
           $("#show_multiplier").attr("style","display:inline");
         }
         $(document).ready(function(event){
           $("#my_multiply_form").submit(do_multiply);
           $("#show_multiplier").click(show_multiplier);
           $("#hide_multiplier").click(hide_multiplier);
          });

      </script>
   </head>
   <body>
      {%include "menu.html"%}
      <div id="main">
         <h1>{{ r.title }}</h1>
         <span id="shoplink"><a href="/shop/{{r.id}}/{{mult}}">Add to Shopping List</a></span>
         {% if r.image %} <img id="recimage" src="/img/{{r.id}}/"> {% endif %}
         <div id="attrs">
            <p>
               <i>
                  {% if r.cuisine %} <br>Cuisine: {{ r.cuisine }} {% endif %}
                  {% if r.link %} <br>Original Link: <a href="{{ r.link }}">{{ r.link }}</a> {% endif %}
                  {% if r.rating %} <br>Rating: {{ r.rating }} {% endif %}
                  {% if cats %}<br>Categories: {{ cats }}{% endif %}
                  {% if r.yields %} <br>Yields: <span id="yields">{{yields}}</span> {{r.yield_unit}} {% endif %}
                  <span id="mult">{% if is_adjusted %}
                  (x{{mult}})
                  {% endif %}
                  </span> <a id="show_multiplier" href="none">(Edit)</a>
            <form style="display:none" id="my_multiply_form" action="/rec/multiply/" method="post">
            {{ multiplier_form.as_p }}
            <input type="hidden" name="rid" value="{{ r.id }}"><input type="submit" value="Multiply">
            <a href="none" id="hide_multiplier">(close)</a>
            </form>
            </i></p>
         </div>
         <div id="text">
            {% if r.instructions %}
            <h2>Instructions</h2>
            <p>{{ instructions|safe }}</p>
            {% endif %}
            {% if r.modifications %}
            <h2>Notes</h2>
            <p>{{ notes|safe }}</p>
            {% endif %}
         </div>
         <div id="ingredients_container">
            <h2>Ingredients</h2>
            <div id="ingredients">
               <ul>
                  {% for group, items in ings %}
                  {% if group %}
                  <li>
                     <b>{{ group }}</b>
                     <ul>
                        {% endif %}
                        {% for item in items %}
                        <li>{{ item }}</li>
                        {% endfor %}
                        {% if group %}
                     </ul>
                  </li>
                  {% endif %}
                  {% endfor %}
               </ul>
            </div>
         </div>
      </div>
   </body>
</html>
