<div data-producers>
    <h1 class="h4 main-panel-title">{'discountProducer'|translate}</h1>

    <div class="row bottom-space">
        <div class="col-md-3">
            <a href="#" data-form-add class="btn btn-success btn-block"><span class="glyphicon glyphicon-plus"></span>&nbsp;{'addProducer'|translate}</a>
        </div>
    </div>

    <div class="panel-group panel-group-lists" id="sets">
        <div class="panel-heading" style="padding-bottom:4px">
            <div class="row">
                <div class="col-md-5">
                    <small><strong>{'producer'|translate}</strong></small>
                </div>
                <div class="col-md-1 col-md-offset-1 text-right">
                    <small><strong>{'set'|translate}</strong></small>
                </div>
                <div class="col-md-1 col-md-offset-2 text-right">
                    <small><strong>{'value'|translate}</strong></small>
                </div>
                <div class="col-md-1 col-md-offset-1">
                    <small><strong>{'action'|translate}</strong></small>
                </div>
            </div>
        </div>

        {foreach array_merge([[]], $body.price_levels_producers|default:[]) as $key => $producer}
            <div class="panel panel-body" {if $key == 0}data-form-new style="display:none"{else}data-form-item{/if}>
                <div class="row">
                    <div class="col-md-6">
                        {if $producer.id}
                            <input type="hidden" class="product-id" name="data[producers][{$key}][id_producer]" value="{$producer.id}">
                            <a href="javascript:nw('producer', {$producer.id})" data-product-title>{$producer.name}</a>
                        {else}
                            <input type="text" class="product-id form-control input-sm" name="data[producers][{$key}][id_producer]" value="">
                        {/if}
                    </div>
                    <div class="col-md-2">
                        <select name="data[producers][{$key}][unit]" class="selecter perc-price">
                            <option value="perc" {'perc'|selected:$producer.unit}>{'discountIn'|translate} %</option>
                            <option value="price" {'price'|selected:$producer.unit}>{'discountIn'|translate} {$dbcfg.currency}</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <div class="{if $producer.unit && $producer.unit!='perc'}input-group{/if}">
                            <input type="text" class="form-control input-sm price" name="data[producers][{$key}][discount]" value="{$producer.discount}">
                        </div>
                    </div>
                    <div class="col-md-1">
                        <a class="btn-sm btn btn-danger" data-form-delete>
                            <input class="hidden" type="checkbox" name="data[producers][{$key}][delete]">
                            <span class="glyphicon glyphicon-remove"></span>
                        </a>
                    </div>
                </div>
            </div>
        {/foreach}
    </div>

    <script type="application/javascript">
       initForm({
          selector:'[data-producers]',
          beforeAdd: function(callback)
          {
             var $item = callback();
             new $.wpjAutoComplete({ input:$item.find('.product-id'), type:'producers', input_name:""});
             return false;
          }
       });
    </script>
</div>
