Dispatcharr/templates/admin/base_site.html

{% extends "base.html" %}
{% load i18n static %}

{% block title %}Admin Dashboard | Dispatcharr{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <!-- DataTables CSS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.min.css">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        {% for app in app_list %}
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="card-title mb-0">{{ app.name }}</h5>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled">
                            {% for model in app.models %}
                                <li>
                                    <a href="{{ model.admin_url }}" class="d-flex justify-content-between align-items-center text-decoration-none">
                                        {{ model.name }}
                                        <span class="badge bg-secondary">Manage</span>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
    {{ block.super }}
    <!-- jQuery (Required for DataTables) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap5.min.js"></script>

    <script>
        $(document).ready(function () {
            // Apply DataTables to all Django admin tables
            $("table").addClass("table table-striped table-dark"); // Bootstrap styling
            $("table").DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "lengthChange": true,
                "pageLength": 10,  // Default page size
                "language": {
                    "search": "Search:",
                    "lengthMenu": "Show _MENU_ entries"
                }
            });
        });
    </script>
{% endblock %}