{# Search Input Component #}
<form method="get" action="/{{ typeNum }}/support/search" id="supportSearchForm" class="support-search-bar">
    <input
        type="text"
        name="q"
        id="supportSearchInput"
        class="form-control"
        placeholder="Search for articles, guides, and help..."
        value="{{ query|default('')|e }}"
        autocomplete="off"
        required
    />
    <button type="submit" title="Search">
        <i class="fa fa-search"></i>
    </button>

    {# Autocomplete container for JS #}
    <div id="searchAutocomplete" class="search-autocomplete" style="display: none;">
        {# Populated by JavaScript #}
    </div>
</form>

<style>
    .search-autocomplete {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border: 1px solid #e7eaec;
        border-top: none;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        max-height: 400px;
        overflow-y: auto;
        z-index: 1000;
        margin-top: 5px;
    }

    .autocomplete-item {
        padding: 12px 15px;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s ease;
    }

    .autocomplete-item:hover {
        background: #f8f9fa;
    }

    .autocomplete-item:last-child {
        border-bottom: none;
    }

    .autocomplete-title {
        font-weight: 600;
        color: #333;
        margin-bottom: 3px;
    }

    .autocomplete-category {
        font-size: 12px;
        color: #999;
    }

    .autocomplete-empty {
        padding: 12px 15px;
        color: #999;
        text-align: center;
    }
</style>

<script>
// Basic autocomplete functionality
(function() {
    var searchInput = document.getElementById('supportSearchInput');
    var autocompleteContainer = document.getElementById('searchAutocomplete');
    var debounceTimer = null;

    if (!searchInput || !autocompleteContainer) return;

    // Hide autocomplete when clicking outside
    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !autocompleteContainer.contains(e.target)) {
            autocompleteContainer.style.display = 'none';
        }
    });

    // Search input handler
    searchInput.addEventListener('input', function(e) {
        var query = e.target.value.trim();

        clearTimeout(debounceTimer);

        if (query.length < 2) {
            autocompleteContainer.style.display = 'none';
            return;
        }

        // Debounce the search
        debounceTimer = setTimeout(function() {
            fetchSuggestions(query);
        }, 300);
    });

    // Focus handler
    searchInput.addEventListener('focus', function(e) {
        var query = e.target.value.trim();
        if (query.length >= 2) {
            fetchSuggestions(query);
        }
    });

    // Fetch suggestions via AJAX
    function fetchSuggestions(query) {
        fetch('/api/{{ typeNum }}/support/search/autocomplete?q=' + encodeURIComponent(query))
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                renderSuggestions(data.suggestions || []);
            })
            .catch(function(error) {
                console.error('Autocomplete error:', error);
            });
    }

    // Render suggestions
    function renderSuggestions(suggestions) {
        if (suggestions.length === 0) {
            autocompleteContainer.innerHTML = '<div class="autocomplete-empty">No suggestions found</div>';
            autocompleteContainer.style.display = 'block';
            return;
        }

        var html = '';
        suggestions.forEach(function(item) {
            html += '<a href="/{{ typeNum }}/support/article/' + item.slug + '" class="autocomplete-item">';
            html += '<div class="autocomplete-title">' + escapeHtml(item.title) + '</div>';
            if (item.categoryName) {
                html += '<div class="autocomplete-category">' + escapeHtml(item.categoryName) + '</div>';
            }
            html += '</a>';
        });

        autocompleteContainer.innerHTML = html;
        autocompleteContainer.style.display = 'block';
    }

    // Escape HTML
    function escapeHtml(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }
})();
</script>