{% macro render_table(headers, rows, id, entry_route=None, title=None, per_page=15) %}
<!-- Table Fragment -->

{% if rows %}
{% if title %}
<label for="datatable-{{ id|default('table')|replace(' ', '-')|lower }}" class="form-label">{{ title }}</label>
{% endif %}
<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 %}">
        <thead class="sticky-top">
            <tr>
                {% for h in headers %}
                <th class="text-nowrap">{{ 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 %}{% if row['highlight'] %} class="table-info"{% endif %}>
                {% for cell in row.cells %}
                <td class="text-nowrap{% if cell.type=='bool' %} 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 () {
        new DataTable('#datatable-{{ id|default('table')|replace(' ', ' - ')|lower }}', {
            pageLength: {{ per_page }},
            scrollX: true,
            scrollY: '60vh',
            scrollCollapse: true,
        })
    })
</script>
{% else %}
<div class="container text-center">No data.</div>
{% endif %}
{% endmacro %}