{% load i18n %}
<style>
    form .g{
        color:green;
    }
</style>


<script type="text/javascript">
    $(document).ready(function(){        
      
       
        var table=$('#tb_boxes').DataTable({
            //"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            //"bLengthChange":true,
            dom: 'Bfrtip',
            autoWidth: false,
            buttons: [{extend:'excelHtml5',text:'导出到Excel'}],           
            language:lng,           
            data:{{data|safe}}
        });       
        
        table.columns().every( function () {                        
            var that = this;             
            $('input', this.footer() ).on( 'keyup change clear', function () {
                if ( that.search() !== this.value ) {
                    that.search( this.value ).draw();
                }
            });
        });   
    });
</script>

<form role="form"  class="form-inline" style="margin-top:0px;">
    <div class="row"  style='padding-left:25px;'>   
        <div class="col-sm-4 input-group">
            <span>{% trans "日期:"%}</span>
            <span class='g'>{{dt_fr}}</span> 到 <span class='g'>{{dt_to}}</span>
        </div>  
        <div class="col-sm-7 input-group">
            <span>{% trans "产品:"%}</span>
            <span class="g">{{product_name}}</span>
        </div>
    </div>
    
    <div class="row"  style='padding-left:25px;'>   
        <div class="col-sm-4 input-group">
            <span>{% trans "仓库:"%}</span>
            <span class="g">{{store_name}}</span>
        </div>  
        <div class="col-sm-4 input-group">
            <span>{% trans "生产批次:"%}</span>
            <span class="g">{{batch_no}}</span>
        </div>  
        <div class="col-sm-3 input-group">
            <span>{% trans "质检员:"%}</span>
            <span class="g">{{qc}}</span>
        </div>  
    </div>
</form>
<div class="clearfix"></div>
<div id="inventory-list" class="table-responsive">
    <div class='x_panel'>    
    <table id="tb_boxes" class="table table-striped table-bordered dt-responsive" width="100%" >
        <thead><tr>
            {% for c in clmns %}
                <th>{{c}}</th>
            {% endfor %}
        </tr></thead>
        <tbody></tbody>
        <tfoot>
           {% for c in clmns %}
                <th><input type="text" placeholder="{{c}}"></th>            
            {% endfor %}
        </tfoot>
    </table>   
    </div>
</div>
