{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block head %}
<link href="{{ base_url }}/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="{{ base_url }}/pagefind/pagefind-ui.js"></script>
<style>
/* Configurable colors */
:root {
    --hero-bg: {{ background_color }};
    --accent: {{ accent_color }};
}

/* Pagefind customizations */
.pagefind-ui {
    --pagefind-ui-scale: 1;
    --pagefind-ui-primary: var(--accent);
    --pagefind-ui-text: #1e293b;
    --pagefind-ui-background: #ffffff;
    --pagefind-ui-border: #e2e8f0;
    --pagefind-ui-tag: #f1f5f9;
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 8px;
    --pagefind-ui-image-border-radius: 6px;
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hide filter panel - use browse pages instead */
.pagefind-ui__filter-panel {
    display: none !important;
}

.pagefind-ui__search-input {
    font-size: 1.25rem !important;
    padding: 1rem 1.5rem !important;
}

.pagefind-ui__result {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    background: white !important;
}

.pagefind-ui__result:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.pagefind-ui__result-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
}

.pagefind-ui__result-excerpt {
    font-family: Georgia, serif !important;
    line-height: 1.6 !important;
}

.pagefind-ui__result-image {
    border-radius: 6px !important;
    object-fit: cover !important;
}

/* Search header */
.search-header {
    background: var(--hero-bg);
    padding: 2rem 0;
}

.search-header h1 {
    color: white;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.search-header .subtitle {
    color: rgba(255,255,255,0.8);
    text-align: center;
    margin-bottom: 1.5rem;
}

.search-header .stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.search-header .stat {
    text-align: center;
    color: white;
}

.search-header .stat-value {
    font-size: 1.75rem;
    font-weight: bold;
}

.search-header .stat-label {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Main content area */
.search-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.search-box-wrapper {
    max-width: 1000px;
    margin: 0 auto 1rem;
}

/* Wider search results */
.pagefind-ui__drawer {
    max-width: 100% !important;
    margin: 0 auto !important;
}

.search-tips {
    max-width: 1000px;
    margin: 0 auto;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: rgba(255,255,255,0.9);
    font-size: 0.875rem;
    text-align: center;
}

.search-tips strong {
    color: white;
}
</style>
{% endblock %}

{% block body %}
<header>
    <div class="container">
        <a href="{{ base_url }}/main.html" class="logo">{{ emoji }} {{ title }}</a>
        <nav>
            {% if summary %}
            <div class="dropdown">
                <button class="dropdown-toggle">Overview</button>
                <div class="dropdown-menu">
                    <a href="{{ base_url }}/overview/summary.html">📄 Finding Aid</a>
                    <a href="{{ base_url }}/overview/changes.html">🔄 Key Changes</a>
                    <a href="{{ base_url }}/overview/questions.html">❓ Research Questions</a>
                </div>
            </div>
            {% endif %}
            {% if enable_browse_dates %}
            <a href="{{ base_url }}/browse/dates.html">Browse by Date</a>
            {% endif %}
            {% if enable_browse_entities %}
            <a href="{{ base_url }}/browse/entities.html">Browse by Entity</a>
            {% endif %}
        </nav>
    </div>
</header>

<section class="search-header">
    
    <div class="stats">
        <div class="stat">
            <div class="stat-value">{{ documents|length }}</div>
            <div class="stat-label">Documents</div>
        </div>
        {% if entities.all_entities %}
        <div class="stat">
            <div class="stat-value">{{ entities.all_entities|length }}</div>
            <div class="stat-label">Entities</div>
        </div>
        {% endif %}
    </div>
    
    
</section>

<main class="search-main">
    <div id="search"></div>
</main>

<footer>
    <div class="container">
    </div>
</footer>
{% endblock %}

{% block scripts %}
<script>
    window.addEventListener('DOMContentLoaded', function() {
        new PagefindUI({
            element: "#search",
            showImages: true,
            showSubResults: true,
            showEmptyFilters: false,
            resetStyles: false,
            autofocus: true,
            sort: { date: "asc" }
        });
        
        // Focus search input
        setTimeout(function() {
            const input = document.querySelector('.pagefind-ui__search-input');
            if (input) {
                input.focus();
            }
        }, 100);
        
        // Intercept clicks on search results to pass query parameter
        document.getElementById('search').addEventListener('click', function(e) {
            const link = e.target.closest('a');
            if (link && link.href) {
                const input = document.querySelector('.pagefind-ui__search-input');
                if (input && input.value.trim()) {
                    e.preventDefault();
                    const url = new URL(link.href);
                    url.searchParams.set('q', input.value.trim());
                    window.location.href = url.toString();
                }
            }
        });
    });
</script>
{% endblock %}