{% extends 'base.html' %}
{% load static %}
{% load widget_tweaks %}
{% load i18n %}{% block body %}

	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container-fluid">
			<div class="card card-custom gutter-b">
				<div class="card-header">
					<h3 class="card-title">
						{% trans "Search in List" %}
					</h3>
					<div class="card-toolbar">
						<a class="btn btn-icon" data-toggle="collapse" href="#collapse" role="button"
						   aria-expanded="false" aria-controls="collapseExample">
							<i class="fa fa-angle-down"></i>
						</a>
					</div>
				</div>
				<div id="collapse" class="card-body collapse">

					<form class="filters">
						<div class="row gutter-b">
							{% for field in filters.form %}
								<div class="col-md-6 col-lg-3">
									<div class="form-group ">
										<label class="col-form-label">{{ field.label }}</label>
										<div class="col-12">
											{% render_field field class='form-control' %}
										</div>
									</div>
								</div>
							{% endfor %}
							<div class="col-md-12 align-self-center">
								<div class="">
									<div class="col-12 text-right">
										<button type="button"
												class="btn btn-primary btn-sm btn-icon-sm"
												id="btn_filter">
											{% trans "Submit" %}
											<i class="flaticon-search ml-2"></i>
										</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="card card-custom">
				<div class="card-header">
					<h3 class="card-title">
						{{ model_name }}
						{% trans "List" %}
					</h3>
					<div class="card-toolbar">
						<a href="{% url 'user_create' %}" class="btn btn-primary">
							<i class="fa fa-plus"></i>
							{% trans "Create" %}
						</a>
					</div>
				</div>
				<div class="card-body">
					{% if not disableTable %}
						<table class="table table-striped table-custom-border text-center table-rounded table-borderless table-thead-primary"
							   id="table">
							<thead>
							{% for field in cols %}
								<th>{{ field }}</th>
							{% endfor %}
							<th>{% trans "Action" %}</th>
							</thead>
							<tbody>

							</tbody>
						</table>
					{% endif %}
				</div>
			</div>
		</div>
		<!--end::Container-->
	</div>


{% endblock %}
{% block script %}
	<script src="{% static 'assets/plugins/custom/datatables/datatables.bundle.js' %}" type="text/javascript"></script>
	<script src="{% static 'badi_utils/js/datatable.js' %}" type="text/javascript"></script>
	<script>
        var table = datatable_simple_show({
                url: '{{ api_url }}datatable/',
                real_cols: {{cols|length}},
                hide_id: true,
                loading_all: true,
                responsive: true,
                datable_id: '#table',
                del_url: '{{ api_url }}0',
                up_url: 'update/0',
                extra_del_params: {
                    ajax: true,
                },
                extra_filters: function (d) {
                    $('.filters input, .filters select').each(function (i, e) {
                        d[e.getAttribute('name')] = $(e).val();
                    })
                },
            }, {
                rowCallback: function (row, data) {
                    console.log(data)
                    defaultDrawCallBack(row, [data[0], data[0], data[5], data[6], data[7]], table);
                    makeDatatableProfile(0, row, '#table', data[1] , data[3]+ ' ' + data[4], data[8])
                },
                drawCallback: function (e) {
                },
                lengthChange: false,
                searching: false,
            }
        );

        $('.modal select').select2({
            dir: "rtl"
        });
        $('#btn_filter').click(function () {
            table.draw();
        });
	</script>
{% endblock %}
