@using (Html.BeginForm())
{
<div class="recipes-home-body inner-page">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-9">
                <div class="recipe-set submit-recipe-set">
                    <h2>Submit Recipe</h2>
                    <p>Food Recipe theme include a Recipe Submit Template. It allow users to submit a recipe with
                    featured image and related details. A user should be logged in to submit a recipe.</p>

                    <div class="submit-recipe-form">
                        @Html.Partial("AddIngredientX");

                        @Html.Partial("CreateIngredientX");
                        @using (Html.BeginForm()) {



                            @Html.LabelFor(model => model.Recipe.Title, "Recipe Title")
                            @Html.EditorFor(model => model.Recipe.Title)
                            <br />

                            @Html.LabelFor(model => model.Recipe.Description, "Description")
                            @Html.TextAreaFor(model => model.Recipe.Description)
                            <br />

                            @Html.LabelFor(model => model.Recipe.Image, "Upload Image")
                            @*<label for="upload-image">Upload Image</label>*@
                            <input type = "file" name = "fileUpload" id = "upload-image" />
                                 <br />


                                 <div>
                                     <fieldset class="ingredient-set">
                                    @Html.ListBoxFor(
                                    model => model.Ingredients, new MultiSelectList(Model.SelectedIngredients),
                                    new { style = "width:50%;" })
                                </fieldset>
                            </div>

                            @*<div>
                                <button type="submit" id="hiddenButton" class="recipe-submit-btn" onclick="loadScriptAndInit();"></button>
                             </div>*@

                                <fieldset class="ingredient-set">
                                    @Html.LabelFor(model => model.Recipe.Preparation, "Steps")
                                    <ul class="list-sortable steps">
                                        <li>
                                            <div class="add-fields">
                                                <span class="handler-list"><i class="fa fa-arrows"></i></span>
                                                @Html.TextAreaFor(model => model.Recipe.Preparation)
                                                <span class="del-list"><i class="fa fa-trash"></i></span>
                                            </div>
                                        </li>
                                    </ul>
                                    <span class="add-button add-steps">
                                        <i class="fa fa-plus"></i>
                                    </span>
                                </fieldset>

                                <div class="text-center">
                                    <button type="submit" class="recipe-submit-btn">Submit Your Recipe</button>
                                </div>
                        }