<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4" id="main-content">
    <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">Dashboard</h1>
    </div>
    <div id="content">
        <!-- Initial content goes here -->
        <p>Welcome to the administrator dashboard.</p>
    </div>
</main>

<?php include(__DIR__ . '/../partials/footer_back.php'); ?>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-cVj0DXe9C1fYM2oK5RD7T0I5vBnv3tntntGiTfP1F3e5Sf5fp3E3Ql5h0QQjxyV" crossorigin="anonymous"></script>

<script>
$(document).ready(function() {
    $('.nav-link').click(function(e) {
        var target = $(this).attr('href');
        if (target.startsWith('#')) {
            // Handle collapse toggle for menu items
            return;
        }

        e.preventDefault();
        $.ajax({
            url: target,
            method: 'GET',
            success: function(response) {
                $('#content').html(response);
            },
            error: function() {
                $('#content').html(
                    '<p>Sorry, an error occurred while loading the page.</p>');
            }
        });
    });
});
</script>