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

<head>
    <?php $pageTitle = "Stack Library";
    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 = "Stack Library"; $pageSubTitle1 = "Icons"; $pageSubTitle2 = "SmartAdmin"; $pageSubText = "Your saved stacked icons collection"; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div class="card">
                            <div class="card-body" style="min-height: calc(100vh - 340px);">
                                <div class="mb-3">
                                    <input type="text" id="searchIcons" class="form-control form-control-lg" placeholder="Search saved icons..." autocomplete="off">
                                </div>
                                <div id="stack-library-container">
                                    <!-- Icons will be dynamically loaded here -->
                                    <ul id="iconList" class="list-unstyled row g-4"></ul>
                                </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="/public/scripts/pages/stacklibrary.js"></script>

    <script>
        /* Inject additional scripts dynamically */
        console.log('Stack Library page initialized');
    </script>

</body>

</html>