{% extends "base.html" %}

{% set active_page = 'unified-search' %}

{% block title %}Search - Deep Research System{% endblock %}

{% block extra_head %}
{# Shared search chrome (input, mode selector, notice, empty state) —
   the notes page defines these generic ldr-notes-* search styles. #}
<link rel="stylesheet" href="/static/css/notes.css">
{% endblock %}

{% block content %}
<div class="ldr-page active" id="unified-search">
    <div class="ldr-notes-page-header">
        <h1><i class="fas fa-search"></i> Search</h1>
    </div>

    <!-- Search input + mode selector (same chrome as the notes page) -->
    <div class="ldr-notes-filters">
        <div class="ldr-notes-search">
            <i class="fas fa-search"></i>
            <!-- maxlength mirrors the server's MAX_SEARCH_LEN (512): the
                 endpoints 400 past it, so stop the overflow at the input -->
            <input type="text" id="ldr-unified-search-input" placeholder="AI Hybrid: keywords + meaning..."
                   maxlength="512" aria-label="Search everything">
        </div>
        <!-- Search mode selector — mirrors the notes/library/history/news
             pages (Text / AI Hybrid / AI only). Items are rendered by the
             page JS from its SEARCH_MODE_REGISTRY, so a future mode is one
             registry entry with no template change. -->
        <div class="dropdown ldr-notes-search-mode">
            <button class="btn btn-sm ldr-btn-outline dropdown-toggle" type="button"
                    id="unified-search-mode-btn" data-bs-toggle="dropdown" aria-expanded="false"
                    aria-label="Search mode">
                <i class="fas fa-brain" aria-hidden="true"></i>
                <span id="unified-search-mode-label">AI Hybrid</span>
            </button>
            <ul class="dropdown-menu" aria-label="Search mode" id="unified-search-mode-menu">
                <!-- Populated from SEARCH_MODE_REGISTRY by unified_search.js -->
            </ul>
        </div>
    </div>

    <!-- Inline search notice (e.g. one hybrid leg unavailable) -->
    <div id="ldr-unified-search-notice" class="ldr-notes-search-notice" role="status" aria-live="polite" style="display: none;"></div>

    <!-- Results. Deliberately NOT aria-live: announcing the whole 20-40
         card list on every debounced re-render buries screen-reader users;
         the notice/empty regions above/below carry the status updates. -->
    <div class="ldr-unified-search-results" id="ldr-unified-search-results"></div>

    <!-- Empty / idle / error state -->
    <div id="ldr-unified-search-empty" class="ldr-notes-empty" role="status" aria-live="polite">
        <i class="fas fa-search ldr-notes-empty-icon"></i>
        <h3>Search everything</h3>
        <p>Find notes, library documents, and research reports in one place</p>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<!-- Note: url-validator.js, ui.js, urls.js, formatting.js, api.js are already loaded in base.html -->
<!-- Shared semantic-search merge helpers (window.SemanticSearch),
     reused by the notes/library/history/news pages for hybrid search. -->
<script defer src="/static/js/components/semantic_search.js"></script>
<script defer src="/static/js/pages/unified_search.js"></script>
{% endblock %}