<h2>Recipe Photo</h2>

{{#saved}}
  <h3>Saved</h3>
  <p>
    Your new recipe photo has been uploaded and saved.
  </p>
{{/saved}}

{{>form_errors}}

<div id="recipecan_loading" style="display: none;">

  <div class="recipecan_spinner">
    <img src="{{options.plugin_url}}/images/loading.gif" />
  </div>
  <div class="recipecan_text">
    Your image file is uploading.  Please be patient as this process may take
    a minute or two.
  </div>

  <br class="recipecan_clean" />
</div>

<form 
    id="recipecan_file_upload_form"
    action="?page=recipecan_recipe_photo&id={{recipe.data.id}}&method=post"
    method="post"
    enctype="multipart/form-data">
    Select a Photo: <input type="file" name="recipecan_file" id="recipecan_file"><br/><br/>
</form>

<script>
    jQuery(document).ready(function() {

        jQuery('#recipecan_file').change(function() {
            jQuery('#recipecan_loading').show().css({paddingBottom: '10px'});
            setTimeout(function() {
                jQuery('#recipecan_file_upload_form').submit().hide();
            }, 5000);
        });

    });
</script>


<div>
  {{#recipe.has_image}}
      <img src="{{recipe.image_large}}"
        alt="Recipe Photo" />
  {{/recipe.has_image}}
  {{^recipe.has_image}}
        There is no photo for this recipe.
  {{/recipe.has_image}}
</div>

