{% extends "frontend/base.html" %}

{% load static %}

{% block styles %}
<link href="{% static 'ajax_datatable/css/style.css' %}" rel="stylesheet" />
<link rel='stylesheet' href="{% static 'frontend/dist/css/dataTables.bootstrap4.min.css' %}">
<link rel='stylesheet' href="{% static 'frontend/dist/css/buttons.bootstrap4.min.css' %}">
{% endblock %}

{% block content %}
<!-- Main content -->
<div class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="card">
            <div class="card-header">
              <h5 class="m-0">{{ title }}</h5>
            </div>
            <div class="card-body">
              <p class="card-text">
                {% block pretable %}
                {% endblock %}
                {% block table %}
                <div class="table-responsive">
                    <table id="datatable" width="100%" class="table table-striped table-bordered dt-responsive compact nowrap">
                    </table>
                </div>
                {% endblock %}
                {% block posttable %}
                {% endblock %}
              </p>
            </div>
          </div>

        </div>
        <!-- /.col-md-6 -->

      </div>
      <!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content -->
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="{% static 'ajax_datatable/js/utils.js' %}"></script>
<script src="{% static 'frontend/dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/buttons.print.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/jszip.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/pdfmake.min.js' %}"></script>
<script src="{% static 'frontend/dist/js/vfs_fonts.js' %}"></script>

<script language="javascript">
    $(document).ready(function() {
        AjaxDatatableViewUtils.initialize_table(
            $('#datatable'),
            "{{ data_url }}"
        );
    });
</script>

{% block extrascripts %}
{% endblock %}

{% endblock %}