<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "SmartTables: Server-Side Mode"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "SmartTables: Server-Side Mode"; $pageSubTitle1 = "Data Visualization"; $pageSubTitle2 = "Smart Tables"; $pageSubText = "Loading the table with server side data."; include('partials/app-pagetitle.php'); ?>
                    
                    <div class="main-content">
                        <div class="info-container">
                            <strong>Here</strong> we use <code>mock-server.php</code> to load data via AJAX, data resets every 24 hours.
                            Configure with:
                            <code>
                                data: { type: 'ajax', source: 'API_URL', serverSide: true, method: 'GET', cacheDuration: 300000 }
                            </code>
                            Processing happens server-side; client only renders. <strong>Searched, paging, and sorting</strong> is cached for 5 minutes.
                            Test how this works by opening the browser's <strong>developer tools</strong> and going to the <strong>Network</strong> tab. <a href="smarttablesjs.php#smarttables-server-side" target="_blank">See documentation →</a>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <table id="demo-table"></table>
                            </div>
                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

    <script type="module" src="/public/scripts/pages/smarttablesserverside.js"></script>

</body>

</html>