<!DOCTYPE html>
<html lang="en">
  <head>
    <title>[admin] Edit recipe {{ recipe.recipe_id }} @ Proxy</title>
    {% include "includes/headers.html" %}
  </head>
  <body class="container-fluid">
    {% include "includes/navbar.html" %}
    <header>
      <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
          <li class="breadcrumb-item"><a href="/admin/">[admin]</a></li>
          <li class="breadcrumb-item"><a href="/admin/recipes/">Recipes</a></li>
          <li class="breadcrumb-item"><a href="/admin/recipes/{{ recipe.recipe_id }}/">{{ recipe.recipe_id }}</a></li>
          <li class="breadcrumb-item active" aria-current="page">Edit</li>
        </ul>
      </nav>
      <h1>[admin] Edit recipe {{ recipe.recipe_id }}</h1>
    </header>
    <main>
      {% include "includes/admin-alert.html" %}
      <form name="recipe" action="/admin/actions/update-recipe" method="POST" class="form">
        <input type="hidden" name="recipe_id" value="{{ recipe.recipe_id }}"/>
        <div class="form-group">
          <label>Name</label>
          <input name="name" value="{{ recipe.name|nonone }}" class="form-control" required="required"/>
        </div>
        <div class="form-group">
          <label>Description</label>
          <textarea rows="6" name="description" class="form-control">{{ recipe.description|nonone }}</textarea>
        </div>
        <div class="checkbox">
          {% if recipe.cloneable %}
          <label><input type="checkbox" name="cloneable" checked="checked"/> Cloneable?</label>
          {% else %}
          <label><input type="checkbox" name="cloneable"/> Cloneable?</label>
          {% endif %}
        </div>
        <div class="form-group">
          <label>Stub</label>
          <input name="stub" value="{{ recipe.stub|nonone }}" class="form-control"/>
        </div>
        <div class="form-group">
          <label>New password (leave blank for no change)</label>
          <input name="password" class="form-control"/>
        </div>
        <div class="form-group">
          <label>JSON arguments</label>
          <textarea rows="12" name="args" class="form-control" required="required" type="json">{{ args }}</textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-success">Save changes</button>
        </div>
      </form>
    </main>
    <script>
      var recipeForm = document.forms["recipe"];
      function validateForm() {
          var args = recipeForm["args"].value;
          try {
              JSON.parse(args);
              return true;
          } catch (e) {
              recipeForm["args"].style.borderColor = "red";
              alert(e);
              return false;
          }
      }
      recipeForm.onsubmit = validateForm;    
    </script>
    {% include "includes/scripts.html" %}
  </body>
</html>

