{% extends "backoffice/masters/main.html" %}
{% load static widget_tweaks %}

{% block page_title %}{{ name }}{% endblock page_title %}
{% block card_title %}{{ name }}{% endblock card_title %}

{% block styles %}
    <link href="{% static 'assets/plugins/custom/datatables/datatables.bundle.css' %}"
          rel="stylesheet"
          type="text/css" />
{% endblock styles %}

{% block toolbar_actions %}
    {% if create_url %}
        {% toolbar_button url=create_url %}
    {% endif %}
{% endblock toolbar_actions %}

{% block content %}
<!--begin::Card-->
<div class="card">
    <!--begin::Card header-->
    <div class="card-header border-0 pt-6">
        <!--begin::Wrapper-->
        <div class="d-flex flex-stack mb-5">
            <!--begin::Search-->
            <div class="d-flex align-items-center position-relative my-1">
                <i class="ki-duotone ki-magnifier fs-1 position-absolute ms-6"><span class="path1"></span><span class="path2"></span></i>
                <input type="text"
                        data-kt-docs-table-filter="search"
                        class="form-control form-control-solid w-250px ps-15"
                        placeholder="Procurar" />
            </div>
            <!--end::Search-->
        </div>
        <!--end::Wrapper-->
    </div>
    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body py-4">
        <!--begin::Datatable-->
        <table id="{{ table_id }}"
            class="table align-middle table-row-dashed fs-6 gy-5">
            <thead>
                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                    {% for column in columns %}
                        {% if column.visible %}<th class="{{ column.align }}">{{ column.name }}</th>{% endif %}
                    {% endfor %}
                </tr>
            </thead>
            <tbody class="text-gray-600 fw-semibold">
            </tbody>
        </table>
        <!--end::Datatable-->
    </div>
    <!--end::Card body-->
</div>

<!--end::Card-->
{% endblock content %}
{% block pos_content %}
{% endblock pos_content %}
{% block scripts %}
    <script src="{% static 'assets/plugins/custom/datatables/datatables.bundle.js' %}"></script>
    <script>
    "use strict";

    {% if extend_js %}
        {% include extended_filepath %}
    {% endif %}

    const MetronicDatatable = function () {
        let table;
        let datatable;
        let filter;

        const initDatatable = function() {
            datatable = $("#{{ table_id }}").DataTable({
                searchDelay: 500,
                processing: true,
                serverSide: true,
                order: [],
                stateSave: true,
                ajax: {
                    url: "{{ request.path }}",
                    type: "POST"
                },
                columns: [
                    {% for column in columns %}
                        {% if column.visible and not column.is_action %}
                        {
                            data: '{{ column.field }}',
                            orderable: {{ column.sortable|yesno:"true,false" }},
                            className: '{{ column.align }}',
                            render: function(data, type, row) {
                                try{
                                    return get_{{column.field}}_html(data);
                                } catch(e) {
                                    return data;
                                }
                            }
                        },
                        {% endif %}
                    {% endfor %}
                    { data: null },
                ],
                columnDefs: [
                    {
                        targets: -1,
                        title: 'Ações',
                        orderable: false,
                        className: 'text-end',
                        render: function(data, type, row) {
                            return `
                            {% #datatable_action %}
                                {% for column in columns %}
                                    {% for action in column.actions %}
                                        {% datatable_action_item identifier=action.identifier name=action.name method=action.method url=action.url %}
                                    {% endfor %}
                                {% endfor %}
                            {% /datatable_action %}
                            `;
                        }
                    }
                ],
            })

            table = datatable.$

            datatable.on('draw', function () {
                KTMenu.createInstances();
            });
        }

        return {
            init: function () {
                initDatatable();
            }
        };
    }

    // On document ready
    KTUtil.onDOMContentLoaded(function() {
        MetronicDatatable().init();
    });
    </script>
{% endblock scripts %}
