{% extends "base.html" %}

{% block title %}{{ query }} - AI Search - Rexa Search{% endblock %}

{% block content %}
{% if not query %}
<div class="home-container">
    <div class="logo">
        <h1>Rexa Search</h1>
    </div>
    <div class="search-tips">
        <p>Please enter a search query.</p>
    </div>
</div>
{% else %}
<div class="results-header">
    <form action="/ai" method="get" class="search-form-inline">
        <div class="search-logo">
            <a href="/"><h1>Rexa Search</h1></a>
        </div>
        <div class="search-box-inline">
            <input 
                type="text" 
                name="q" 
                value="{{ query }}" 
                autocomplete="off"
            >
            <button type="submit">Ask AI</button>
        </div>
    </form>

    <div class="search-tabs">
        <a href="/ai?q={{ query }}" class="active">AI</a>
        <a href="/search?q={{ query }}">Web</a>
        <a href="/images?q={{ query }}">Images</a>
    </div>
</div>

<div class="ai-answer-container">
    <div class="ai-answer">
        {{ answer|safe }}
    </div>
</div>

{% if search_results %}
<div class="search-results-section">
    <h3>Search Results ({{ search_type }})</h3>
    <div class="results-container">
        {% for result in search_results %}
        <div class="result-item">
            <h4>
                <a href="{{ result.url }}" target="_blank" rel="noopener noreferrer">
                    {{ result.title }}
                </a>
            </h4>
            <div class="result-url">{{ result.url }}</div>
            <div class="result-snippet">
                {% if result.highlights %}
                    {{ result.highlights[0]|safe }}
                {% else %}
                    {{ result.text }}
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if not answer %}
<div class="no-results">
    <p>Unable to generate answer for "{{ query }}"</p>
    <p>Please try again or use Web search instead.</p>
</div>
{% endif %}
{% endif %}
{% endblock %}