       unit:            @model.unit()
       singleItemPrice: @model.formattedPrice()
       lineItemPrice:   @model.get("lineItemPrice") || ''
+      productId:       @model.get("productId")
 
     App.i18n(this)
     this

    quantity = parseInt(event.target.value)
    @model.set(quantity: quantity)

  removeLineItem: (event) ->
    event.preventDefault()
    event.target.disabled = true # disable button

  events:
    "change .epages-cart-overlay-line-item-quantity": "changeQuantity"
    "click .epages-cart-overlay-line-item-remove": "removeLineItem"
    "click .epages-cart-overlay-line-item-quantity-hidden": "changeQuantityH"

  template: _.template """
    <td class="epages-cart-overlay-image">
      <span class="epages-cart-overlay-line-item-quantity-hidden" style="visibility: hidden;" id="h-<%= productId %>"></span>
      <img src="<%= itemImage %>">
    </td>
    <td class="epages-cart-overlay-name"><%= name %></td>
    <td class="epages-cart-overlay-price"><span class="epages-cart-overlay-subhead-narrow" data-i18n='unit-price'></span><%= singleItemPrice %></td>
    <td class="epages-cart-overlay-quantity">
      <span class="epages-cart-overlay-subhead-narrow" data-i18n='quantity' id="s-<%= productId %>"></span><input type="number" class="epages-cart-overlay-line-item-quantity" value="<%= quantity %>">
      <%= unit %>
    </td>
    <td class="epages-cart-overlay-total"><span class="epages-cart-overlay-subhead-narrow" data-i18n='total-price'></span><%= lineItemPrice %></td>
    <td class="epages-cart-overlay-remove">
      <button class="epages-cart-overlay-line-item-remove"
              alt="Remove product"
              id="b-<%= productId %>">
      </button> <span data-i18n='remove-line-item'></span>
    </td>
  """
