{% extends "base.html" %}

{% block title %}Search - Context7 Docs{% endblock %}

{% block content %}
<h2>Search Documentation</h2>

<form method="get" action="/search/results" class="search-form">
    <label for="query">Query:</label>
    <input type="text" id="query" name="q" required placeholder="Enter your search query..." value="{{ query or '' }}">
    
    <label for="limit">Limit results:</label>
    <select id="limit" name="limit">
        <option value="5">5</option>
        <option value="10" selected>10</option>
        <option value="20">20</option>
        <option value="50">50</option>
    </select>
    
    <button type="submit">Search</button>
</form>

<div id="search-results" class="results-box"></div>

{% if results %}
<div class="results-count">{{ results|length }} results found</div>
{% endif %}

<script>
async function loadResults(query, limit) {
    const searchBox = document.getElementById("search-results");
    
    try {
        const payload = { query: query || "{{ initial_query or '' }}", library_id: null, limit: parseInt(limit) };
        const api = window.docsApiClient;
        
        const result = await api.post("/search", payload);
        
        if (result.results && Array.isArray(result.results)) {
            searchBox.className = "results-box";
            let html = '<div class="results-count">' + result.results.length + ' results found</div>';
            
            for (const r of result.results) {
                const title = r.title || (r.content || '').substring(0, 100);
                const content = (r.content || '').substring(0, 500);
                html += '<div class="result-card">' +
                    '<h3>' + escapeHtml(title) + '</h3>' +
                    '<p>' + escapeHtml(content) + '...</p>' +
                    '<a href="/docs/' + (r.library_id || '') + '">View Full</a></div>';
            }
            
            html += '<a href="/search/form" class="new-search-link">← New Search</a>';
            searchBox.innerHTML = html;
        }
    } catch (err) {
        searchBox.innerHTML = '<p class="error">Error loading results: ' + escapeHtml(err.message) + '</p>';
    }
}

// Load initial results if query parameter exists in URL
var urlParams = new URLSearchParams(window.location.search);
{% if query %}loadResults(urlParams.get('q') || urlParams.get('q'), urlParams.get('limit'));{% endif %}

function escapeHtml(str) {
    if (!str) return "";
    var e = document.createElement('div');
    e.textContent = str;
    return e.innerHTML;
}
</script>
{% endblock %}