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

<head>
    <?php $pageTitle = "List Filter";
    include('partials/app-meta-title.php') ?>

    <link rel="stylesheet" href="/public/plugins/highlightjs/night-owl.css">

    <?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 = "Smart Filter";
                    $pageSubTitle1 = "Components";
                    $pageSubTitle2 = "UI Components";
                    $pageSubText = "Advanced navigation filtering with fuzzy search capabilities.";
                    include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div class="row">

                            <!-- Did you mean suggestions example -->
                            <div class="col-xl-6">
                                <div class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>Did you mean suggestions</h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Try typing <strong>"javas"</strong> to see suggestions.
                                                You can also finetune this for better suggestions via an separate json file.
                                                Checkout this in the works in our <a href="systemicons.php">Icon Filter</a> page.
                                            </div>
                                            <div class="input-group mb-3">
                                                <span class="input-group-text">
                                                    <i class="sa sa-magnifier"></i>
                                                </span>
                                                <input type="text" id="suggestionsFilterInput" class="form-control" placeholder="Search with suggestions...">
                                                <span id="suggestionsFilterMessage" class="input-group-text text-sm"></span>
                                            </div>
                                            <nav class="nav-menu">
                                                <ul id="suggestionsNav" class="nav-menu-list list-unstyled list-spaced">
                                                    <li class="nav-title">Programming Languages</li>
                                                    <li><a href="#"><span class="nav-link-text">JavaScript</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">TypeScript</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Python</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Java</span></a></li>

                                                    <li class="nav-title">Framework Components</li>
                                                    <li><a href="#"><span class="nav-link-text">Components</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Compnent</span></a></li>

                                                    <li class="nav-title">Authentication Terms</li>
                                                    <li><a href="#"><span class="nav-link-text">Auth</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Authenticate</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Authntication</span></a></li>

                                                    <li class="nav-title">Development Tools</li>
                                                    <li><a href="#"><span class="nav-link-text">Develop</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Developer</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Devlopment</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Developement</span></a></li>

                                                    <li class="nav-title">Configuration Items</li>
                                                    <li><a href="#"><span class="nav-link-text">Config</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Configure</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Configuraton</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Configration</span></a></li>

                                                    <li class="nav-title">Database Terms</li>
                                                    <li><a href="#"><span class="nav-link-text">Database</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Data</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Databse</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">Datatbase</span></a></li>
                                                    <li><a href="#"><span class="nav-link-text">DataBase</span></a></li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- File Explorer Example -->
                            <div class="col-xl-6">
                                <div class="panel panel-icon">
                                    <div class="panel-hdr">
                                        <h2>File Explorer with Nested Structure</h2>
                                        <div class="panel-toolbar">
                                            <button type="button" class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse">
                                                <svg class="sa-icon">
                                                    <use class="panel-collapsed-icon" href="/public/img/sprite.svg#minus-circle"></use>
                                                    <use class="panel-expand-icon" href="/public/img/sprite.svg#plus-circle"></use>
                                                </svg>
                                            </button>
                                            <button type="button" class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen">
                                                <svg class="sa-icon">
                                                    <use href="/public/icons/sprite.svg#stop-circle"></use>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="panel-container show">
                                        <div class="panel-content">
                                            <div class="panel-tag">
                                                Search through nested file structure with automatic parent folder expansion. Try typing partial words or misspelled terms (e.g., "btn" for "Button.js")
                                            </div>
                                            <div class="input-group input-group-lg mb-3">
                                                <span class="input-group-text">
                                                    <i class="sa sa-folder"></i>
                                                </span>
                                                <input type="text" id="fileFilterInput" class="form-control" placeholder="Search files...">
                                                <span id="fileFilterMessage" class="input-group-text"></span>
                                            </div>
                                            <nav class="nav-menu">
                                                <ul id="fileExplorer" class="nav-menu-list list-unstyled list-spaced">
                                                    <li class="nav-title">Project Root</li>
                                                    <li>
                                                        <a href="#"><span class="nav-link-text">src/</span></a>
                                                        <ul>
                                                            <li>
                                                                <a href="#"><span class="nav-link-text">components/</span></a>
                                                                <ul>
                                                                    <li><a href="#"><span class="nav-link-text">Button.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">Card.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">Modal.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">Form.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">Table.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">Chart.js</span></a></li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <a href="#"><span class="nav-link-text">utils/</span></a>
                                                                <ul>
                                                                    <li><a href="#"><span class="nav-link-text">helpers.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">constants.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">validation.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">formatting.js</span></a></li>
                                                                </ul>
                                                            </li>
                                                            <li>
                                                                <a href="#"><span class="nav-link-text">services/</span></a>
                                                                <ul>
                                                                    <li><a href="#"><span class="nav-link-text">api.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">auth.js</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">storage.js</span></a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#"><span class="nav-link-text">public/</span></a>
                                                        <ul>
                                                            <li><a href="#"><span class="nav-link-text">index.php</span></a></li>
                                                            <li><a href="#"><span class="nav-link-text">styles.css</span></a></li>
                                                            <li><a href="#"><span class="nav-link-text">assets/</span></a>
                                                                <ul>
                                                                    <li><a href="#"><span class="nav-link-text">images/</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">fonts/</span></a></li>
                                                                    <li><a href="#"><span class="nav-link-text">icons/</span></a></li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </li>
                                                    <li>
                                                        <a href="#"><span class="nav-link-text">tests/</span></a>
                                                        <ul>
                                                            <li><a href="#"><span class="nav-link-text">unit/</span></a></li>
                                                            <li><a href="#"><span class="nav-link-text">integration/</span></a></li>
                                                            <li><a href="#"><span class="nav-link-text">e2e/</span></a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </nav>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

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

                </div>

            </div>

        </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/listfilter.js"></script>

    <!-- Code Highlightjs -->
    <script src="/public/plugins/highlightjs/highlight.min.js"></script>
    <script src="/public/plugins/highlightjs/go.min.js"></script>
    <script src="/public/scripts/pages/code-highlight.js"></script>

</body>

</html>