scinote-web/app/views/steps/_form_checklists.html.erb

<div class="panel panel-default panel-step-attachment">
  <div class="panel-heading">
    <span class="glyphicon glyphicon-list"></span>
    <%= t("protocols.steps.new.checklist_panel_title") %>
    <div class="pull-right">
      <%= ff.remove_nested_fields_link do %>
        <span class="glyphicon glyphicon-remove"></span>
      <% end %>
    </div>
  </div>
  <div class="panel-body">
    <%= ff.smart_text_area :name,
                           label: t('protocols.steps.new.checklist_name'),
                           class: 'checklist_name',
                           autofocus: true,
                           placeholder: t('protocols.steps.new.checklist_name_placeholder'),
                           data: { 'atwho-edit' => '' } %>
    <%= ff.label t("protocols.steps.new.checklist_items") %>
    <ul>
      <%= ff.nested_fields_for :checklist_items, ordered_checklist_items(ff.object) do |chkItems| %>
        <li>
          <div class="row">
            <span class="glyphicon glyphicon-chevron-right handle-move pull-left"></span>
            <div class="row">
              <div class="col-xs-6">
                <%= chkItems.smart_text_area :text,
                                             autofocus: true,
                                             placeholder: t('protocols.steps.new.checklist_item_placeholder'),
                                             hide_label: true,
                                             class: 'checklist-item-text form-control',
                                             single_line: true,
                                             data: { 'atwho-edit' => '' } %>
                <%= chkItems.hidden_field :position, class: "checklist-item-pos" %>
              </div>
              <div class="col-xs-1">
                <div class="btn btn-link">
                  <%= chkItems.remove_nested_fields_link do %>
                    <span class="glyphicon glyphicon-remove"></span>
                  <% end %>
                </div>
              </div>
            </div>
          </div>
        </li>
      <% end %>
    </ul>
    <%= ff.add_nested_fields_link :checklist_items do %>
      <span class="glyphicon glyphicon-plus"></span>
      <%= t("protocols.steps.new.checklist_add_item") %>
    <% end %>
  </div>
</div>