
<div class="modal fade" id="quick-search-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <h3 style="margin-top: 0;">Settings Search</h3>
                <input type="text" id="quick-search-input" class="form-control" placeholder="Search settings (e.g. 'Blocks', 'Workflows')..." autocomplete="off">
                <ul id="quick-search-results" class="list-group margin-t-sm" style="max-height: 300px; overflow-y: auto;">
                    </ul>
            </div>
        </div>
    </div>
</div>
<script>
(function() {
    
    {% page expression:'ParentPage.ParentPageId IN (4207,44) && DisplayInNavWhen != 2' sort:'PageTitle' iterator:'pages' %}{% endpage %}
    const pages = [
        {% for p in pages %}
        { name: '{{ p.InternalName | Escape }}', url: '/page/{{ p.Id }}' }{% unless forloop.last %},{% endunless %}
        {% endfor %}
    ];

    let selectedIndex = -1;

    // 2. Key Listener for Cmd+E
    document.addEventListener('keydown', function(e) {
        if ((e.metaKey || e.ctrlKey) && e.key === 'e') {
            e.preventDefault();
            $('#quick-search-modal').modal('show');
            setTimeout(() => document.getElementById('quick-search-input').focus(), 500);
        }
    });

    const input = document.getElementById('quick-search-input');
    const resultsContainer = document.getElementById('quick-search-results');

    input.addEventListener('input', function() {
        const val = this.value.toLowerCase();
        const filtered = pages.filter(p => p.name.toLowerCase().includes(val)).slice(0, 10);
        renderResults(filtered);
    });

    function renderResults(list) {
        selectedIndex = 0;
        resultsContainer.innerHTML = list.map((p, i) => 
            `<a href="${p.url}" class="list-group-item quick-item ${i === 0 ? 'active' : ''}" data-url="${p.url}">${p.name}</a>`
        ).join('');
    }

    // 3. Navigation and Special Keys (Space/Enter/Shift)
    input.addEventListener('keydown', function(e) {
        const items = resultsContainer.querySelectorAll('.quick-item');
        
        // 1. Navigation
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
            updateSelection(items);
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            selectedIndex = Math.max(selectedIndex - 1, 0);
            updateSelection(items);
        } 
        
        // 2. Selection (Enter or Space)
        else if (e.key === 'Enter') { 
            e.preventDefault();
            const target = items[selectedIndex];
            
            if (target) {
                const url = target.getAttribute('data-url');
                
                // Check for Cmd (Mac) or Ctrl (Windows)
                if (e.metaKey || e.ctrlKey) {
                    const a = document.createElement('a');
                    a.href = url;
                    a.target = '_blank';
                    // Removing 'noopener' temporarily can sometimes help with focus, 
                    // but try it with it first for security.
                    a.rel = 'noopener noreferrer'; 
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    
                    // Close the modal so the current page is "clean" when you return
                    $('#quick-search-modal').modal('hide');
                }
                else {
                    window.location = url;
                }
                
                // Optional: Close modal after selection
                $('#quick-search-modal').modal('hide');
            }
        }
    });

    function updateSelection(items) {
        items.forEach((item, i) => {
            item.classList.toggle('active', i === selectedIndex);
        });
    }
})();
</script>
<style>
    .main-footer:has(.html-content) {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
    }
</style>