parsley/app/views/ingredients/_form.html.erb

<% has_ndbn = @ingredient.ndbn.present? %>

<%= form_for(@ingredient, html: {id: 'ingredient_form'}) do |f| %>

  <%= render partial: 'shared/error_list', locals: {model: @ingredient} %>

  <%= f.hidden_field :ndbn, class: 'ndbn' %>
  <%= f.hidden_field :id, class: 'id', disabled: true %>

  <div class="form-group">
    <%= f.label :name, class: 'control-label' %>
    <%= f.text_field :name, class: 'form-control name', autofocus: true %>
  </div>

  <div class="form-group ndbn_group">
    <%= f.label :ndbn, "Nutrient Databank Number", class: 'control-label' %>
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="<%= ndbn_button_class(@ingredient) %>" data-toggle="modal" data-target="#link_ndbn_modal">
          <span class="glyphicon glyphicon-link"></span><span class="ndbn"><%= @ingredient.ndbn %></span>
        </button>
      </div>
      <%= f.text_field :usda_food_name, class: 'form-control', readonly: true %>
    </div>
  </div>

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

  <div class="form-group">
    <%= f.label :density, class: 'control-label' %>
    <%= f.text_field :density, class: 'form-control', disabled: has_ndbn %>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Per 100 grams</h3>
    </div>
    <div class="panel-body">
      <fieldset <%= 'disabled=disabled' if has_ndbn %>>

        <div class="form-group">
          <%= f.label :water, "Grams of Water", class: 'control-label' %>
          <%= f.text_field :water, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :protein, "Grams of Protein", class: 'control-label' %>
          <%= f.text_field :protein, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :lipids, "Grams of Fat", class: 'control-label' %>
          <%= f.text_field :lipids, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :carbohydrates, "Grams of Fat", class: 'control-label' %>
          <%= f.text_field :carbohydrates, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :kcal, "Calories", class: 'control-label' %>
          <%= f.text_field :kcal, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :fiber, "Grams of Fiber", class: 'control-label' %>
          <%= f.text_field :fiber, class: 'form-control' %>
        </div>

        <div class="form-group">
          <%= f.label :sugar, "Grams of Sugar", class: 'control-label' %>
          <%= f.text_field :sugar, class: 'form-control' %>
        </div>
      </fieldset>
    </div>
  </div>



  <div class="actions">
    <%= f.submit class: 'btn btn-primary' %>
  </div>

  <div class="modal fade" id="link_ndbn_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">USDA Food Link</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <%= f.label :ndbn, "", class: 'control-label' %>
            <input type="text" class="ndbn_typeahead form-control" />
          </div>
        </div>

        <div class="results">

        </div>


        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

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

<% end %>