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

<head>
    <?php $pageTitle = "SmartTables: Import & Export Data"; 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 = "Import & Export Data"; $pageSubTitle1 = "Smart Tables"; $pageSubTitle2 = "Data Visualization"; $pageSubText = "No manual processing, no hassle\u2014just smooth, efficient data management built for developers. \ud83d\ude80"; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div id="hide-import-data">
                            <div class="info-container">
                                <p class="mb-0">
                                    The <strong>SmartTables Import</strong> feature streamlines your workflow by
                                    <strong>automatically</strong> or <strong>conditionally</strong> importing
                                    <code>JSON</code> and <code>CSV</code> files (with more formats coming soon).
                                    Imported data is instantly <strong>sorted and listed</strong>, ready for you to explore.
                                    Need to share or transform your data? <strong>Effortlessly export</strong> it
                                    in multiple formats with just a click.
                                </p>
                            </div>
                            <button id="importBtn" type="button" class="btn btn-default btn-lg d-flex align-items-center mb-2">
                                <svg class="sa-icon sa-icon-success sa-thin sa-icon-4x me-2">
                                    <use href="/public/icons/sprite.svg#upload-cloud"></use>
                                </svg>
                                Import Data
                            </button>
                            <small>
                                <strong>Note:</strong>
                                The import feature is currently limited to CSV and JSON files. Download sample files <a href="/public/json/MOCK_DATA.json" target="_blank">here</a>.
                            </small>
                        </div>

                        <div id="errorContainer" class="alert alert-danger d-none">
                            <h4 class="alert-heading">Error</h4>
                            <p>Could not open the import modal. Please try refreshing the page or check the console for errors.</p>
                        </div>

                        <div id="tableContainer" class="d-none">
                            <div class="row">
                                <div class="col-lg-12">
                                    <table id="myTable" class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <!-- Data will be populated by SmartTables -->
                                        </thead>
                                        <tbody>
                                            <!-- Data will be populated by SmartTables -->
                                        </tbody>
                                    </table>
                                </div>
                            </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 src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.5/xlsx.full.min.js"></script>

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

</body>

</html>