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

<head>
    <?php $pageTitle = "SmartTables"; 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 = "JSON Data Source"; $pageSubTitle1 = "Data Visualization"; $pageSubTitle2 = "Smart Tables"; $pageSubText = "Loading the table with External JSON data source with over 1000 records."; include('partials/app-pagetitle.php'); ?>
                    
                    <div class="main-content">
                        <div class="info-container">
                            The <code>render</code> function allows you to manipulate data, apply <strong>custom styling</strong>,
                            implement <strong>logic</strong>, and add various functionalities. For example, you can <strong>hover over a
                                product to see its image</strong>, style emails based on mail providers, or use <strong>data matching</strong> to
                            encode badges with colors. These are just basic examples—you can do much more with the <code>render</code> function. <a href="smarttablesjs.php#smarttables-configuration" target="_blank">See Documentation →</a>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <table id="myTable" class="table table-striped table-bordered table-hover d-none"></table>
                            </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/smarttablesjsonsource.js"></script>

</body>

</html>