{% extends "admin/base_site.html" %}



{% block nav-global %}



{% block extrajs %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const form = document.querySelector('#custom-header-element form');
        const input = document.querySelector('#custom-header-element input[name="q"]');
        if (!form || !input) return;
        
        let resultsBox = document.createElement('div');
        resultsBox.style.position = 'absolute';
        resultsBox.style.background = '#222';
        resultsBox.style.zIndex = 1001;
        resultsBox.style.border = '1px solid #ccc';
        resultsBox.style.width = input.offsetWidth + 'px';
        resultsBox.setAttribute('role', 'listbox');
        input.parentNode.appendChild(resultsBox);
        
        let results = [];
        let selectedIndex = -1;
        
        const showResults = (data) => {
            results = data;
            resultsBox.innerHTML = '';
            if (data.length > 0) {
                data.forEach((item, index) => {
                    const div = document.createElement('div');
                    div.classList.add("search-suggestions");
                    div.textContent = item.label;
                    div.style.padding = '8px 12px';
                    div.style.cursor = 'pointer';
                    div.style.color = '#fff';
                    div.setAttribute('role', 'option');
                    
                    div.addEventListener('mouseover', () => {
                        selectedIndex = index;
                        updateSelection();
                    });
                    
                    div.addEventListener('click', () => {
                        window.location.href = item.url;
                    });
                    
                    resultsBox.appendChild(div);
                });
                resultsBox.style.display = 'block';
            } else {
                resultsBox.style.display = 'none';
            }
        }
        
        const updateSelection = () => {
            const items = resultsBox.getElementsByTagName('div');
            for (let i = 0; i < items.length; i++) {
                if (i === selectedIndex) {
                    items[i].style.backgroundColor = '#4b545c';
                } else {
                    items[i].style.backgroundColor = '';
                }
            }
        }
        
        let debounceTimer;
        input.addEventListener('input', (e) => {
            clearTimeout(debounceTimer);
            const query = e.target.value;
            
            if (query.length < 2) {
                resultsBox.style.display = 'none';
                return;
            }
            
            debounceTimer = setTimeout(() => {;
                fetch(`/admin/model-suggestions/?q=${encodeURIComponent(query)}`)
                .then(response => response.json())
                .then(showResults);
            }, 300);
        });
        
        input.addEventListener('keydown', (e) => {
            const items = resultsBox.getElementsByTagName('div');
            
            switch(e.key) {
                case 'ArrowDown':
                e.preventDefault();
                selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
                updateSelection();
                break;
                
                case 'ArrowUp':
                e.preventDefault();
                selectedIndex = Math.max(selectedIndex - 1, 0);
                updateSelection();
                break;
                
                case 'Enter':
                e.preventDefault();
                if (selectedIndex >= 0 && results[selectedIndex]) {
                    window.location.href = results[selectedIndex].url;
                }
                break;
                
                case 'Escape':
                resultsBox.style.display = 'none';
                selectedIndex = -1;
                break;
            }
        });
        
        document.addEventListener('click', (e) => {
            if (!input.contains(e.target) && !resultsBox.contains(e.target)) {
                resultsBox.style.display = 'none';
                selectedIndex = -1;
            }
        });
    });
</script>
{% endblock extrajs %}

<div id="custom-header-element">
    <form method="get" action="{% url 'model_suggestions' %}" style="display: inline-block;">
        <input type="text" name="q" placeholder="Recherche ..." 
        value="{{ request.GET.q }}" 
        style="padding: 10px 10px; margin-right: 15px; width: 200px;"
        autocomplete="off"
        id="admin-search-bar"/>
    </form>
</div>
{% endblock nav-global %}