{% macro render_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
{% if rows %}
<div class="table-responsive">
    <table id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"
        class="table table-bordered table-sm table-hover table-striped table-light m-0{% if title %} caption-top{% endif %}">
        {% if title %}
        <caption>{{ title }}</caption>
        {% endif %}
        <thead class="sticky-top">
            <tr>
                {% for h in headers %}
                <th>{{ h }}</th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
            <tr {% if entry_route %}onclick="window.location='{{ url_for('main.' + entry_route, id=row.id) }}'"
                style="cursor: pointer;" {% endif %}>
                {% for cell in row.cells %}
                <td {% if cell.type=='bool' %}class="text-center" {% endif %}>
                    {% if cell.type == 'bool' %}
                    {{ cell.html | safe }}
                    {% elif cell.url %}
                    <a class="link-success link-underline-opacity-0" href="{{ cell.url }}">{{ cell.text }}</a>
                    {% else %}
                    {{ cell.text or '-' }}
                    {% endif %}
                </td>
                {% endfor %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        {# console.log($('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]'))
        $('table[id="datatable-{{ id|default('table')|replace(' ', '-')|lower }}"]').DataTable({
            pageLength: {{ per_page }},
            lengthChange: false,
            ordering: true,
            stateSave: true
        }) #}
        new DataTable('#datatable-{{ id|default('table')|replace(' ', '-')|lower }}', {
            pageLength: {{ per_page }},
            colReorder: true
        })
    })
</script>
{% else %}
<div class="container text-center">No data.</div>
{% endif %}
{% endmacro %}

{% macro render_pagination(endpoint, page, has_prev, has_next, total_pages, page_variable='page', extra_args={}) %}
{# % set prev_args = extra_args.copy() %}
{% set next_args = extra_args.copy() %}
{% set first_args = extra_args.copy() %}
{% set last_args = extra_args.copy() %}
{% set _ = prev_args.update({page_variable: page - 1}) %}
{% set _ = next_args.update({page_variable: page + 1}) %}
{% set _ = first_args.update({page_variable: 1}) %}
{% set _ = last_args.update({page_variable: total_pages}) %}
{% if total_pages > 1 %}

<div class="d-flex justify-content-between pt-3 px-5 align-items-center">
    <div>
        <a href="{{ url_for(endpoint, **first_args) }}"
            class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&laquo; First</a>
        <a href="{{ url_for(endpoint, **prev_args) }}"
            class="btn btn-primary{% if not has_prev %} disabled{% endif %}">&lt; Prev</a>
    </div>

    <div class="d-flex flex-column align-items-center text-center pt-3">
        <div>Page {{ page }} of {{ total_pages }}</div>
        <div>
            {% for number in range(page - 2, page + 3) if number > 0 and number <= total_pages %} {% set
                args=extra_args.copy() %} {% set _=args.update({page_variable: number}) %} <a
                href="{{ url_for(endpoint, **args) }}"
                class="btn btn-sm {% if number == page %}btn-primary{% else %}btn-outline-primary{% endif %} mx-1">
                {{ number }}
                </a>
                {% endfor %}
        </div>
    </div>

    <div>
        <a href="{{ url_for(endpoint, **next_args) }}"
            class="btn btn-primary{% if not has_next %} disabled{% endif %}">Next &gt;</a>
        <a href="{{ url_for(endpoint, **last_args) }}"
            class="btn btn-primary{% if not has_next %} disabled{% endif %}">Last &raquo;</a>
    </div>
</div>
{% endif % #}
{% endmacro %}