- new_article_data = articles_for_select2(@order.articles, @order_articles.map(&:article_id)) {|a| "#{a.name} (#{a.unit_quantity}⨯#{a.unit})" }
- content_for :javascript do
  :javascript

    var new_article_data = #{new_article_data.to_json};

    function update_delta(input) {
      var units = $(input).val();
      var expected = $(input).data('units-expected');
      var html;

      if (units.replace(/\s/g,"")=="") {
        // no value
        html = '';
      } else if (isNaN(units)) {
        html = '<i class="icon-remove" style="color: red"></i>';
      } else if (units == expected) {
        // equal value
        html = '<i class="icon-ok" style="color: green"></i>';
      } else if (units < expected) {
        html = '<span style="color: red">- '+(expected-units)+'</span>';
      } else /*if (units> expected)*/ {
        html = '<span style="color: green">+ '+(units-expected)+'</span>';
      }

      $(input).closest('tr').find('.units_delta').html(html);
    }

    $(document).on('change', 'input[data-units-expected]', function() {
      update_delta(this);
    });

    $(function() {
      $('input[data-units-expected]').each(function() {
        update_delta(this);
      });

      init_add_article('#add_article');
    });

    function init_add_article(sel) {
      $(sel).removeAttr('disabled').select2({
        placeholder: '#{t 'orders.add_article.title'}',
        data: new_article_data,
        // TODO implement adding a new article, like in deliveries
      }).on('change', function(e) {
        var selectedArticle = $(e.currentTarget).select2('data');
        if(!selectedArticle) {
          return false;
        }

        $.ajax({
          url: '#{add_article_order_path(@order)}',
          type: 'get',
          data: {article_id: selectedArticle.id},
          contentType: 'application/json; charset=UTF-8'
        });
        // clear selection
        $('#add_article').select2('data', null);
        // remove newly added item from list of items
        new_article_data = $.grep(new_article_data, function(el, i) {
          return el.id != selectedArticle.id;
        });
        init_add_article(sel)
        return true;
      });
    }



%table.ordered-articles.table.table-striped.stupidtable
  %thead
    %tr
      %th.sort{:data => {:sort => 'string'}}= heading_helper Article, :order_number, short: true
      %th.sort{:data => {:sort => 'string'}}= heading_helper Article, :name
      %th= heading_helper GroupOrderArticle, :units
      %th Members
      %th Ordered
      -#%th Invoice # TODO implement invoice screen
      %th Received
      %th
  %tbody#result_table
    - @order_articles.each do |order_article|
      = render :partial => 'edit_amount', :locals => {:order_article => order_article}
  %tfoot
    %tr
      %th{:colspan => 8}
        %input#add_article{:style => 'width: 500px;'}