{% extends "base.html" %}

{% block content %}
<div class="card">
    <div class="card-body">
        <h2><i class="fas fa-search"></i> Search AI Interactions</h2>

        <form method="get" action="/thoughts" class="mt-4">
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="search" class="form-label">Search Content</label>
                        <input type="text" id="search" name="search" class="form-control"
                            placeholder="Search AI interaction content...">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="category" class="form-label">Category</label>
                        <select id="category" name="category" class="form-select">
                            <option value="">All Categories</option>
                            <option value="user-input">👤 User Input</option>
                            <option value="ai-response">🤖 AI Response</option>
                            <option value="conversation">� Conversation</option>
                            <option value="ai-interaction">🔄 AI Interaction</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="tag" class="form-label">Tag</label>
                        <input type="text" id="tag" name="tag" class="form-control" placeholder="Filter by tag...">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="size" class="form-label">Results per page</label>
                        <select id="size" name="size" class="form-select">
                            <option value="10">10</option>
                            <option value="20" selected>20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="mt-4">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-search"></i> Search AI Interactions
                </button>
                <a href="/search" class="btn btn-secondary ms-2">
                    <i class="fas fa-times"></i> Clear
                </a>
                <a href="/dashboard" class="btn btn-outline-secondary ms-2">
                    <i class="fas fa-home"></i> Back to Dashboard
                </a>
            </div>
        </form>
    </div>
</div>

<div class="card mt-4">
    <div class="card-body">
        <h5><i class="fas fa-lightbulb"></i> Search Tips</h5>
        <ul class="text-muted">
            <li><strong>Content Search:</strong> Search within AI conversation text</li>
            <li><strong>Category Filter:</strong> Filter by user input, AI responses, or full conversations</li>
            <li><strong>Tag Filter:</strong> Enter specific tags like 'chat', 'gemini', 'user-query', etc.</li>
            <li><strong>Combine Filters:</strong> Use multiple filters together for precise results</li>
        </ul>
    </div>
</div>
{% endblock %}