{% extends "base.html" %}

{% block title %}Rexa Search{% endblock %}

{% block content %}
<div class="home-container">
    <div class="logo">
        <h1>Rexa Search</h1>
    </div>

    <form action="/ai" method="get" class="search-form" id="searchForm">
        <div class="search-box">
            <input 
                type="text" 
                name="q" 
                id="searchInput"
                placeholder="Ask anything..." 
                autocomplete="off"
                autofocus
            >
        </div>
        <div class="search-buttons">
            <button type="submit" formaction="/ai">AI Search</button>
            <button type="submit" formaction="/search">Web Search</button>
            <button type="submit" formaction="/images">Image Search</button>
        </div>
    </form>

    <div class="search-tips">
        <p>Powered by Exa API</p>
    </div>
</div>

<script>
document.getElementById('searchForm').addEventListener('submit', function(e) {
    var query = document.getElementById('searchInput').value.trim();
    if (!query) {
        e.preventDefault();
        return false;
    }
});
</script>
{% endblock %}