parsley/app/views/recipes/_editor.html.erb

<div class="recipe_editor">

  <div class="row">
    <div class="col-xs-7">
      <div class="form-group form-group-sm">
        <%= f.label :name, class: "control-label" %>
        <%= f.text_field :name, class: 'form-control' %>
      </div>
    </div>

    <div class="col-xs-5">
      <div class="form-group form-group-sm">
        <%= f.label :source, class: "control-label" %>
        <%= f.text_field :source, class: 'form-control' %>
      </div>
    </div>
  </div>


  <div class="form-group form-group-sm">
    <%= f.label :description, class: "control-label" %>
    <%= f.text_area :description, class: 'form-control' %>
  </div>

  <div class="row">
    <div class="col-xs-4">
      <div class="form-group form-group-sm">
        <%= f.label :yields, class: "control-label" %>
        <%= f.text_field :yields, class: 'form-control', placeholder: 'Servings' %>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="form-group form-group-sm">
        <%= f.label :total_time, class: "control-label" %>
        <%= f.number_field :total_time, class: 'form-control', placeholder: 'Minutes' %>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="form-group form-group-sm">
        <%= f.label :active_time, class: "control-label" %>
        <%= f.number_field :active_time, class: 'form-control', placeholder: 'Minutes' %>
      </div>
    </div>
  </div>


  <h3>Ingredients</h3>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#bulk_ingredients_modal">Bulk Edit</button>
  <div id="ingredient-list">
    <%= f.fields_for :recipe_ingredients do |ri_form| %>
      <%= render partial: 'recipes/editor/ingredient', locals: { f: ri_form } %>
    <% end %>
  </div>

  <div id="deleted_ingredients"></div>

  <%= link_to_add_association 'Add Ingredient', f, :recipe_ingredients, partial: 'recipes/editor/ingredient', :'data-association-insertion-node' => '#ingredient-list', :'data-association-insertion-method' => 'append', class: 'btn btn-primary', id: 'addIngredientButton' %>


  <h3>Steps</h3>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#bulk_steps_modal">Bulk Edit</button>
  <div id="step-list">
    <%= f.fields_for :recipe_steps do |rs_form| %>
      <%= render partial: 'recipes/editor/step', locals: { f: rs_form } %>
    <% end %>
  </div>

  <div id="deleted_steps"></div>

  <%= link_to_add_association 'Add Step', f, :recipe_steps, partial: 'recipes/editor/step', :'data-association-insertion-node' => '#step-list', :'data-association-insertion-method' => 'append', class: 'btn btn-primary', id: 'addStepButton' %>

  <% content_for(:page_bottom) do %>

    <%= render partial: 'recipes/editor/bulk_ingredient_dialog' %>
    <%= render partial: 'recipes/editor/bulk_step_dialog' %>

    <div class="modal fade" id="convert_modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Unit Conversion</h4>
          </div>
          <div class="modal-body">
            <%= render partial: 'recipes/editor/conversion_form' %>
          </div>


          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary" form="conversion_form">Convert</button>
          </div>


        </div>
      </div>
    </div>

  <% end %>

</div>