{% extends 'base.html' %}
{% load static %}
{% load i18n %}

{% block body %}


	<div class="d-flex flex-column-fluid">
		<!--begin::Container-->
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-12">
					<!--begin::Card-->
					<div class="card card-custom">
						<div class="card-header">
							<h3 class="card-title">
								{% trans "List" %}
								{{ model_name }}
							</h3>
							<div class="card-toolbar">
								<div class="example-tools justify-content-center">
									{% if form|length is 1 %}
										{% include 'component/createTitle.html' %}
									{% else %}
										{% include 'component/createModal.html' %}
									{% endif %}
								</div>
							</div>
						</div>
						<!--begin::Form-->
						<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>
						<!--end::Form-->
					</div>
					<!--end::Card-->
				</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>
        const table = datatable_simple_show({
            api_url: "{{ api_url }}",
            real_cols: {{cols|length}},
            datable_id: '#table',
        }, {
            rowCallback: function (row, data) {
                minimizeText(row, data, 2, 1, 40)
            }
        });

        $('#modal_here').on('submit', function (e) {
            e.preventDefault()
            const button = document.getElementById('submitter');
            ApiAjax({
                url: '{{ api_url }}',
                form: 'form',
                method: 'POST',
                button: button,
                table: table,
                modal: '#modal_here',
                success_message: '{% trans "Done Successfully" %}',
            })
        })

	</script>
{% endblock %}
