@{
    ViewData["Title"] = "Home Page";
}

<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3">
            <div class="text-center">
                <h1 class="display-4">Get Started</h1>
                <p>e.g. "Who do I talk to about <i>something</i>?"</p>
            </div>
            
            <form id="search-form">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Ask a question..." id="search-query">
                    <div class="input-group-append">
                        <button class="btn btn-primary" type="submit">Search</button>
                    </div>
                </div>
            </form>

            <div id="search-results" class="mt-4">
                <!-- Results will be displayed here -->
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>
        document.getElementById("search-form").addEventListener("submit", function (e) {
            e.preventDefault();

            const query = document.getElementById("search-query").value;

            // TODO: Implement search functionality here and populate the results in the "search-results" div
            // For now, you can use placeholder content

            const resultsDiv = document.getElementById("search-results");
            resultsDiv.innerHTML = '<p>Search results for: <strong>' + query + '</strong></p>';
            resultsDiv.innerHTML += '<ul>';
            resultsDiv.innerHTML += '<li>Result 1</li>';
            resultsDiv.innerHTML += '<li>Result 2</li>';
            resultsDiv.innerHTML += '</ul>';
        });
    </script>
}