{% extends "base.html" %}

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

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

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

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

<div class="images-grid">
    {% for result in results %}
    <div class="image-item">
        <a href="{{ result.url }}" target="_blank" rel="noopener noreferrer">
            <div class="image-thumbnail">
                <img src="{{ result.image }}" alt="{{ result.title }}" loading="lazy">
            </div>
            <div class="image-info">
                <p class="image-title">{{ result.title }}</p>
                <p class="image-url">{{ result.url[:50] }}...</p>
            </div>
        </a>
    </div>
    {% endfor %}

    {% if not results %}
    <div class="no-results">
        <p>No images found for "{{ query }}"</p>
        <p>Try different keywords or search for web instead.</p>
    </div>
    {% endif %}
</div>
{% endif %}
{% endblock %}