{% load i18n %}


<script type="text/javascript">
    $(document).ready(function () {
        var page_length = 10;

        var table = $('#tb').DataTable({
            dom: 'Bfrtip',
            autoWidth: true,
            pageLength: page_length,
            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();
                }
            });
        });
        $('.btn-save').click(function () {
            $.SubmitForm('#form_1', '{{request.path}}');
        });
        $('#btn_save2').click(function () {
            $.SubmitForm('#form_2', '{{request.path}}', function () {
                $('.modal-backdrop').remove();
            });
        })

    });

    function editData(id) {
        var items = JSON.parse($("#h_data").val());
        console.log(items);
        for (var i = 0; i < items.length; i++) {
            if (parseInt(id) === items[i].pk) {
                $("#input_id").val(items[i].pk);
                $("#input_image").attr('src','/media/'+items[i].fields.image);
                $("#inputActive2").attr('checked',items[i].fields.is_active);
                $('#model_2').modal('show')
                break;
            }
        }
    }

    function deleteData(id) {
        var r = confirm('您确定要删除这条数据吗？');
        if (r) {
            $.RefreshContent('{{request.path}}delete/' + id + '/');
        }
    }
</script>


<ol class="breadcrumb">
    <li>{{subtt.0}}</li>
    <li>{{subtt.1}}</li>
    <li>{{subtt.2}}</li>
</ol>


{% if perms.company.sys_admin %}

<form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_1"> {% csrf_token %}
    <div class="form-group">
        <label for="input_file" class="col-sm-1 control-label">图片</label>
        <div class="col-sm-11">
            <input id="input_file" type="file" name="image" accept="image/*">
        </div>
    </div>
    <div class="form-group">
        <label for="inputSort" class="col-sm-1 control-label">排序</label>
        <div class="col-sm-11">
            <div class="input-group">
                <input type="number" name="sort_id" class="form-control" id="inputSort" placeholder="请输入排序序号" value="0">
            </div>
        </div>
    </div>
    <div class="form-group ">
        <label class="col-sm-1 control-label ">是否有效</label>
        <div class="col-sm-1">
            <input type="checkbox" name="is_active" checked="checked" style="margin-top:10px">
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-11">
            <a class="btn btn-default btn-save">添加</a>
        </div>
    </div>
</form>

{% endif%}

<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="table-responsive">
            <table id='tb' class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                <thead>
                {% for c in clmns %}
                <th>{{c}}</th>
                {% endfor %}
                </thead>
                <tbody></tbody>
                <tfoot>
                {% for c in clmns %}
                <th><input type="text" placeholder="{{c}}"></th>
                {% endfor %}
                </tfoot>
            </table>
        </div>
    </div>
</div>
<input type="hidden" id="h_data" value="{{list}}">
<div class="modal fade" tabindex="-1" role="dialog" id="model_2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">轮播图修改</h4>
            </div>
            <div class="modal-body">
                <form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form_2">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="input_file2" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <img id="input_image" style="width:100px" />
                            <input id="input_file2" type="file" name="image" accept="image/*">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputSort2" class="col-sm-2 control-label">排序</label>
                        <div class="col-sm-10">
                            <div class="input-group">
                                <input type="number" name="sort_id" class="form-control" id="inputSort2"
                                       placeholder="请输入排序序号" value="0">
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <label for="inputActive2" class="col-sm-2 control-label ">是否有效</label>
                        <div class="col-sm-2">
                            <input type="checkbox" name="is_active" id="inputActive2" style="margin-top:10px">
                        </div>
                    </div>



                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <a class="btn btn-primary" id="btn_save2" style="margin-right: 10px;">修改</a>
                        </div>
                    </div>


                    <input type="hidden" name="banner_id" id="input_id">


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
