line_item.hbs

<td class='quote-line-item-tool-cell'>
  <div class="quote-line-item-tool-left move">
    <i class="fa fa-arrows" title='Click and drag to move'></i>
  </div>
</td>
<td class="center-col">
  <div class="input-wrapper" data-name='part_number'>
    <input type="text" value='{{part_number}}'>
  </div>
</td>
<td>
  <div class="input-wrapper" data-name='name'>
    <input type="text" value='{{name}}'>
  </div>
</td>
<td>
  <div class="input-wrapper" data-name='description'>
    <input type="text" value='{{description}}'>
  </div>
</td>
<td class="right-col">
  <div class="input-wrapper" data-name='unit_price'>
    <input type="text" value='{{formatUnitPrice}}'>
  </div>
</td>
<td class="center-col">
  <div class="input-wrapper" data-name='quantity'>
    <input type="text" value='{{quantity}}'>
  </div>
</td>
<td class="right-col" data-name='line_total'>
  {{formatLineTotal}}
</td>
<td class='quote-line-item-tool-cell'>
  <div class="quote-line-item-tool-right trash">
    <i class="fa fa-trash" title='Click and drag to move'></i>
  </div>
</td>

line_item_group.hbs

<div class="quote-group-container">
  <div class="quote-group-left-tools">
    <div class="quote-group-tool move">
      <i class="fa fa-arrows"></i>
    </div>
  </div>
  <div class="quote-group-content">
    <div class="quote-group-title input-wrapper">
      <input type="text" value={{name}}>
    </div>

    <table class="table line-items editing">
      <thead>
        <tr>
          <th class='quote-line-item-tool-cell'></th>
          <th>Part</th>
          <th>Name</th>
          <th>Description</th>
          <th class='fixed-width-cell'>Price</th>
          <th class='fixed-width-cell'>Qty</th>
          <th class='fixed-width-cell'>Total</th>
          <th class='quote-line-item-tool-cell'></th>
        </tr>
      </thead>
      <tbody class="quote-group-item-region"></tbody>
      <tfoot class="quote-group-footer-region"></tfoot>
    </table>
  </div>
  <div class="quote-group-right-tools">
    <div class="quote-group-tool delete">
      <i class="fa fa-trash"></i>
    </div>
  </div>
</div>

new_line_item_form.hbs

<td class='quote-line-item-tool-cell'></td>
<td class="center-col">
  <div class="input-wrapper" data-name='part_number'>
    <input type="text" placeholder='Part'>
  </div>
</td>
<td>
  <div class="input-wrapper" data-name='name'>
    <input type="text" placeholder='Name'>
  </div>
</td>
<td>
  <div class="input-wrapper" data-name='description'>
    <input type="text"  placeholder='Description'>
  </div>
</td>
<td class="right-col">
  <div class="input-wrapper" data-name='unit_price'>
    <input type="text" value='0.00'>
  </div>
</td>
<td class="center-col">
  <div class="input-wrapper" data-name='quantity'>
    <input type="text" value='1'>
  </div>
</td>
<td class="right-col" data-name='line_total'>
  $0.00
</td>
<td class='quote-line-item-tool-cell'></td>

new_line_item_trigger.hbs

<td class='center-col' colspan=8>add a line item</td>

views.coffee

class Show.LineItemGroup extends App.Views.Layout
  template: 'quote/show/line_item_group'
  className: 'line-item-group'

  regions:
    footerRegion: '.quote-group-footer-region'
    lineItemRegion: '.quote-group-item-region'
      
class Show.LineItems extends App.Views.CollectionView
  childView: Show.LineItem

  onAttach: ->
    # this is to get rid of the parent div on the collectionview
    @$el.children().unwrap()
    @$el = @$el.parent()
    @setElement(@$el)

  filter: (child, index, collection) ->
    child.get('line_item_group_id') == @model.id

  viewComparator: 'position'
  
class Show.NewLineItemForm extends App.Views.ItemView
  template: 'quote/show/new_line_item_form'
  tagName: 'tr'
  className: 'quote-group-footer-form'
  
class Show.NewLineItemTrigger extends App.Views.ItemView
  template: 'quote/show/new_line_item_trigger'
  tagName: 'tr'
  className: 'quote-group-footer-trigger'

  triggers:
    'click' : 'show:form'

class Show.LineItem extends App.Views.ItemView
  template: 'quote/show/line_item'
  tagName: "tr"