{% extends "base.html" %}

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

{% block content %}
<div class="results-header">
    <form action="/search" 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">Search</button>
        </div>
    </form>

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

{% if query %}
<div class="results-stats">
    <p>About {{ results|length }} results found</p>
</div>

<div class="results-container">
    {% for result in results %}
    <div class="result-item">
        <h3>
            <a href="{{ result.url }}" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
        </h3>
        <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 %}

    {% if not results %}
    <div class="no-results">
        <p>No results found for "{{ query }}"</p>
        <p>Try different keywords or check your spelling.</p>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}

{% 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-stats">
    <p>About {{ results|length }} results found</p>
</div>

<div class="results-container">
    {% for result in results %}
    <div class="result-item">
        <h3>
            <a href="{{ result.url }}" target="_blank" rel="noopener noreferrer">{{ result.title }}</a>
        </h3>
        <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 %}

    {% if not results %}
    <div class="no-results">
        <p>No results found for "{{ query }}"</p>
        <p>Try different keywords or check your spelling.</p>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}