{% extends 'lara_django_base/lara_base_menu.html' %}
{% load django_tables2 %}
{% load crispy_forms_tags %}


{% block toolbar %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
   
    <h1 class="h2"> {{ section_title }} </h1>
    {% if filter %}
    <form action="" method="get" class="form form-horizontal-inline">
        {% csrf_token %}

        <!-- bootstrap_form filter.form layout='inline' %}
        bootstrap_button 'filter' layout='inline'  -->
    </form>
    {% endif %}
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
           
            <a href="{% url create_link %}" class="btn btn-warning btn-sm btn-outline-secondary" role="button">Add</a>
            {% if view.export_formats %}
            {% for format in view.export_formats %}
            <button type="button" class="btn btn-sm btn-outline-secondary">
                <a href="{% export_url format %}" >
                    download  <code>.{{ format }}</code>
                </a>
            </button>
            {% endfor %}
            {% endif %}
            <a href="{% url delete_selected_link %}" id="delete-selected" class="btn btn-danger btn-sm btn-outline-secondary" role="button">Delete</a>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
            <span data-feather="sync"></span>
            Sync
        </button>
    </div>
   
   
        <!--form class="" action="" method="post">
            {% csrf_token %}
            {{form|crispy}}
        </form-->


</div>
{% endblock %}

{% load render_table from django_tables2 %}
 
{% block content%}
<div class="table-container">
    <form action="{% url delete_selected_link %}" method="get" id="delete-form">
        {% csrf_token %}
        <button type="submit" class="btn btn-danger">Delete Selected</button>

    {% render_table table  %}
</form>
</div>

{% endblock %}

{% block scripts %}

<script>
    /*
    document.addEventListener("DOMContentLoaded", function() {
        var table = document.querySelector("#entity-table");
        var dataTable = new simpleDatatables.DataTable(table);

        // Select/Deselect all checkboxes
        var checkAllCheckbox = document.querySelector("#check-all");
        var checkboxes = table.querySelectorAll("tbody input[type=checkbox]");

        checkAllCheckbox.addEventListener("change", function() {
            checkboxes.forEach(function(checkbox) {
                checkbox.checked = checkAllCheckbox.checked;
            });
        });

        // Delete selected rows
        
        var deleteSelectedButton = document.querySelector("#delete-selected");
        deleteSelectedButton.addEventListener("click", function() {
            var selectedRows = Array.from(checkboxes).filter(function(checkbox) {
                return checkbox.checked;
            }).map(function(checkbox) {
                return checkbox.closest("tr");
            });

            /*selectedRows.forEach(function(row) {
                dataTable.row(row).remove().draw(false); 
            });
        });*/
</script>

{% endblock %}