{% extends "base.html" %}
{% from "components/custom_dropdown.html" import render_dropdown %}
{% from "components/help_macros.html" import tooltip, help_panel, help_step, help_tip, label_with_tooltip %}

{% set active_page = 'new-research' %}

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

{% block extra_head %}
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="/static/css/custom_dropdown.css">
{% endblock %}

{% block content %}
<div class="ldr-page active" id="new-research">
    <div class="ldr-page-header">
        <h1>Start New Research</h1>
    </div>
    <!-- Alert container for form validation and error messages -->
    <div id="research-alert" class="ldr-settings-alert-container" role="alert" aria-atomic="true" style="display:none"></div>
    <div class="ldr-card ldr-research-card">
        <div class="ldr-card-content">
            <form id="research-form">
                <div class="ldr-form-group">
                    <label for="query">Research Query</label>
                    <textarea id="query" name="query" rows="3" placeholder="Enter your research topic or question..." autofocus aria-required="true"></textarea>
                    <div class="ldr-search-hints">
                        <div class="ldr-hint-row">
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-play ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Enter</kbd> to search</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-level-down-alt ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Shift</kbd>+<kbd>Enter</kbd> for new line</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-home ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Esc</kbd> returns here from anywhere</span>
                            </span>
                            <span class="ldr-hint-item">
                                <i aria-hidden="true" class="fas fa-bars ldr-hint-icon"></i>
                                <span class="ldr-hint-text"><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>1-4</kbd> to navigate menu</span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="ldr-form-group">
                    <fieldset>
                        <legend id="mode-legend">Research Mode</legend>
                        <div class="ldr-mode-selection">
                            <input type="radio" id="mode-quick" name="research_mode" value="quick" checked class="sr-only">
                            <label for="mode-quick" class="ldr-mode-option active" data-mode="quick" tabindex="0">
                                <div class="ldr-mode-icon"><i aria-hidden="true" class="fas fa-bolt" ></i></div>
                                <div class="ldr-mode-info">
                                    <h2>Quick Summary</h2>
                                    <p>Generated in a few minutes</p>
                                </div>
                            </label>

                            <input type="radio" id="mode-detailed" name="research_mode" value="detailed" class="sr-only">
                            <label for="mode-detailed" class="ldr-mode-option" data-mode="detailed" tabindex="-1">
                                <div class="ldr-mode-icon"><i aria-hidden="true" class="fas fa-microscope" ></i></div>
                                <div class="ldr-mode-info">
                                    <h2>Detailed Report <span class="ldr-mode-badge">Advanced</span></h2>
                                    <p>Multi-section analysis {{ tooltip("?", "Generates comprehensive report with extensive source analysis. Duration varies by topic complexity and search settings.", position='right') }}</p>
                                </div>
                            </label>
                            <input type="radio" id="mode-chat" name="research_mode" value="chat" class="sr-only">
                            <label for="mode-chat" class="ldr-mode-option" data-mode="chat" tabindex="-1">
                                <div class="ldr-mode-icon"><i class="fas fa-comments" aria-hidden="true"></i></div>
                                <div class="ldr-mode-info">
                                    <h2>Chat Mode <span class="ldr-mode-badge">Experimental</span></h2>
                                    <p>Conversational research with follow-ups</p>
                                </div>
                            </label>
                        </div>
                    </fieldset>
                </div>

                <!-- Privacy & Egress — hoisted above Advanced Options because these
                     govern WHAT data leaves the machine (a security boundary), not
                     WHICH model/tuning to use. Hiding them inside the collapsible
                     panel meant a user could launch with the wrong policy without
                     realizing it. Always visible by design.
                     The data-scope attribute is updated by JS on dropdown change;
                     CSS below colors the frame / header / icon so the active scope
                     is instantly recognizable without reading the dropdown value. -->
                <style>
                    /* Default panel = neutral slate. BOTH no longer wears
                       an amber "warning" border at the panel level — the
                       "Public search egress enabled" banner does that job
                       in text, and reserving color for active-choice scopes
                       (sky/teal/violet) makes the cue more legible.
                       Specific scope rules below override per state. */
                    .ldr-privacy-panel { border:1px solid #475569; border-radius:6px; padding:0.5rem 1rem 0.85rem; background:rgba(71, 85, 105, 0.05); transition:border-color 0.15s ease, background-color 0.15s ease; }
                    .ldr-privacy-panel-header { font-size:0.95rem; font-weight:600; color:#cbd5e1; margin-bottom:0.5rem; transition:color 0.15s ease; }
                    .ldr-privacy-panel[data-scope="public_only"] { border-color:#3b82f6; background:rgba(59, 130, 246, 0.07); }
                    .ldr-privacy-panel[data-scope="public_only"] .ldr-privacy-panel-header { color:#60a5fa; }
                    .ldr-privacy-panel[data-scope="private_only"] { border-color:#14a37f; background:rgba(20, 163, 127, 0.06); }
                    .ldr-privacy-panel[data-scope="private_only"] .ldr-privacy-panel-header { color:#0f7a5f; }
                    .ldr-privacy-panel[data-scope="strict"] { border-color:#8b5cf6; background:rgba(139, 92, 246, 0.07); }
                    .ldr-privacy-panel[data-scope="strict"] .ldr-privacy-panel-header { color:#a78bfa; }
                    /* Local-inference checkboxes adopt the "local = teal" cue when on. */
                    .ldr-privacy-panel input[type="checkbox"] { accent-color:#14a37f; }
                    .ldr-experimental-badge { font-size:0.8rem; font-weight:600; color:#d9a441; border:1px solid rgba(217, 164, 65, 0.4); border-radius:4px; padding:0.05rem 0.35rem; margin-left:0.4rem; vertical-align:middle; text-transform:uppercase; letter-spacing:0.02em; cursor:help; }
                    /* Whole-workspace scope cue (research card / query textarea /
                       chat input) lives in styles.css now so chat.html and any
                       future page that loads the shared stylesheet inherit it. */
                </style>
                <div class="ldr-form-group">
                    <div role="group" aria-labelledby="ldr-privacy-egress-label" class="ldr-policy-group ldr-privacy-panel" data-scope="{{ settings.policy_egress_scope or 'adaptive' }}">
                        <div id="ldr-privacy-egress-label" class="ldr-privacy-panel-header">
                            <i id="ldr-privacy-panel-icon" class="fas fa-shield-alt" aria-hidden="true"></i> Privacy &amp; Egress
                            <span class="ldr-experimental-badge" title="Experimental: this egress boundary is new and defense-in-depth. It blocks the known data-egress paths under the selected scope, but don't rely on it as your only protection for highly sensitive data yet.">(Experimental)</span>
                        </div>
                        <div class="ldr-form-row" style="margin:0;">
                            <div class="ldr-form-group ldr-half">
                                <label for="policy_egress_scope">{{ tooltip("Egress Scope", "Adaptive (default): follows your primary engine — a private primary keeps everything local, a public primary allows public engines. Public + private: any classified engine. Public only: any public web/academic engine, no local sources. Private only: only local engines (library, paperless, etc.). Primary only: the selected search engine and nothing else.") }}</label>
                                <select id="policy_egress_scope" name="policy_egress_scope" class="ldr-form-control">
                                    <option value="adaptive" {% if not settings.policy_egress_scope or settings.policy_egress_scope == "adaptive" %}selected{% endif %}>Adaptive (default — follows primary)</option>
                                    <option value="both" {% if settings.policy_egress_scope == "both" %}selected{% endif %}>Public + private (any engine)</option>
                                    <option value="public_only" {% if settings.policy_egress_scope == "public_only" %}selected{% endif %}>Public only (no local)</option>
                                    <option value="private_only" {% if settings.policy_egress_scope == "private_only" %}selected{% endif %}>Private only (no internet)</option>
                                    <option value="strict" {% if settings.policy_egress_scope == "strict" %}selected{% endif %}>Primary only (single engine)</option>
                                </select>
                                <span class="ldr-input-help" id="policy_egress_scope_help">Limits which search engines this run may use. <a href="https://github.com/LearningCircuit/local-deep-research/blob/main/docs/egress-modes.md" target="_blank" rel="noopener noreferrer">What does each mode do? &#8599;</a></span>
                            </div>
                            <div class="ldr-form-group ldr-half">
                                <div style="font-weight:normal; opacity:0.85; font-size:0.9rem; margin-bottom:0.35rem;">Local inference</div>
                                <label for="llm_require_local_endpoint" style="display:flex; align-items:center; gap:0.4rem; font-weight:normal; margin:0 0 0.35rem 0;">
                                    <input type="checkbox" id="llm_require_local_endpoint" name="llm_require_local_endpoint" value="true" {% if settings.llm_require_local_endpoint %}checked{% endif %}>
                                    {{ tooltip("Require local LLM endpoint", "When checked, blocks cloud LLM providers (OpenAI, Anthropic, Google, OpenRouter). Local providers (Ollama, LM Studio, llama.cpp) and OpenAI-compatible endpoints pointed at local hosts are allowed.") }}
                                </label>
                                <label for="embeddings_require_local" style="display:flex; align-items:center; gap:0.4rem; font-weight:normal; margin:0;">
                                    <input type="checkbox" id="embeddings_require_local" name="embeddings_require_local" value="true" {% if settings.embeddings_require_local %}checked{% endif %}>
                                    {{ tooltip("Require local embeddings", "When checked, indexing with cloud embedding providers (OpenAI) is blocked. Critical for keeping a local corpus from being uploaded chunk-by-chunk during indexing.") }}
                                </label>
                            </div>
                        </div>
                        <span class="ldr-input-help" style="display:block; margin-top:0.5rem;">These controls decide what data leaves your machine for this run. They override the corresponding global settings just for this research. Configure the model and search engine in Advanced Options below.</span>
                    </div>
                </div>

                <!-- Advanced Options - positioned before start for configuration -->
                <button type="button" id="advanced-options-toggle" class="ldr-advanced-options-toggle ldr-open" aria-expanded="true" aria-controls="advanced-options-panel">
                    <span class="ldr-toggle-text">Advanced Options</span>
                    <i aria-hidden="true" class="fas fa-chevron-up" ></i>
                    <span class="sr-only">Click to collapse advanced options</span>
                </button>

                <div class="ldr-advanced-options-panel ldr-expanded" id="advanced-options-panel" role="group" aria-labelledby="advanced-options-toggle">
                    <div class="ldr-form-row">
                        <!-- Model Provider Selection -->
                        <div class="ldr-form-group ldr-half">
                            <label for="model_provider">{{ tooltip("Model Provider", "Local (Ollama, LM Studio): Free, private, runs on your hardware but slower. Cloud (OpenAI, Anthropic): Faster, smarter, but costs per request and sends data externally.") }}</label>
                            <select id="model_provider" name="model_provider" class="ldr-form-control" data-initial-value="{{ settings.llm_provider }}">
                                <!-- Will be populated dynamically -->
                                <option value="">Loading providers...</option>
                            </select>
                            <span class="ldr-input-help">Local = runs on your computer | Cloud = external API</span>
                        </div>

                        <!-- Custom Endpoint (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="endpoint_container" style="display: none;">
                            <label for="custom_endpoint">{{ tooltip("Custom Endpoint", "OpenAI-compatible API URL. Must include /v1 path (e.g., https://api.example.com/v1). Used for self-hosted or alternative API providers.") }}</label>
                            <input type="text" id="custom_endpoint" name="custom_endpoint" class="ldr-form-control" placeholder="https://your-endpoint-url/v1" value="{{ settings.llm_openai_endpoint_url }}">
                            <span class="ldr-input-help">Enter the OpenAI-compatible API endpoint URL</span>
                        </div>

                        <!-- Anthropic-Compatible Endpoint (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="anthropic_endpoint_container" style="display: none;">
                            <label for="anthropic_endpoint_url">{{ tooltip("Anthropic-Compatible Endpoint", "Anthropic Messages API URL (e.g., https://your-anthropic-endpoint/v1). Used for self-hosted or alternative Anthropic-compatible API providers.") }}</label>
                            <input type="text" id="anthropic_endpoint_url" name="anthropic_endpoint_url" class="ldr-form-control" placeholder="https://your-anthropic-endpoint/v1" value="{{ settings.llm_anthropic_endpoint_url }}">
                            <span class="ldr-input-help">Enter the Anthropic Messages API endpoint URL</span>
                        </div>

                        <!-- Ollama URL (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="ollama_url_container" style="display: none;">
                            <label for="ollama_url">{{ tooltip("Ollama Endpoint", "Where Ollama is running. Default localhost:11434. If connection fails, check that Ollama is installed and running (ollama serve).") }}</label>
                            <input type="text" id="ollama_url" name="ollama_url" class="ldr-form-control" placeholder="http://localhost:11434" value="{{ settings.llm_ollama_url }}">
                            <span class="ldr-input-help">Enter the Ollama endpoint URL</span>
                        </div>

                        <!-- LM Studio URL (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="lmstudio_url_container" style="display: none;">
                            <label for="lmstudio_url">{{ tooltip("LM Studio Endpoint", "Where LM Studio server is running. Default localhost:1234. Enable 'Local Server' in LM Studio settings first.") }}</label>
                            <input type="text" id="lmstudio_url" name="lmstudio_url" class="ldr-form-control" placeholder="http://localhost:1234" value="{{ settings.llm_lmstudio_url }}">
                            <span class="ldr-input-help">Enter the LM Studio endpoint URL</span>
                        </div>

                        <!-- Context Window Size (for local providers, hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="context_window_container" style="display: none;">
                            <label for="context_window">{{ tooltip("Context Window Size", "How much text the model can 'see' at once. Too small: model forgets earlier info. Too large: uses more RAM/VRAM. Only adjust if you see 'context exceeded' errors.") }}</label>
                            <input type="number" id="context_window" name="context_window" class="ldr-form-control" min="512" max="131072" step="1" value="{{ settings.llm_local_context_window_size }}">
                            <span class="ldr-input-help">Context window size in tokens (512-131072) · <a href="/metrics/context-overflow">View context overflow diagnostics</a></span>
                        </div>

                        <!-- OpenAI API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openai_api_key_container" style="display: none;">
                            <label for="openai_api_key">OpenAI API Key</label>
                            <input type="password" id="openai_api_key" name="openai_api_key" class="ldr-form-control"
                                   placeholder="sk-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at platform.openai.com</span>
                        </div>

                        <!-- Anthropic API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="anthropic_api_key_container" style="display: none;">
                            <label for="anthropic_api_key">Anthropic API Key</label>
                            <input type="password" id="anthropic_api_key" name="anthropic_api_key" class="ldr-form-control"
                                   placeholder="sk-ant-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at console.anthropic.com</span>
                        </div>

                        <!-- Google API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="google_api_key_container" style="display: none;">
                            <label for="google_api_key">Google API Key</label>
                            <input type="password" id="google_api_key" name="google_api_key" class="ldr-form-control"
                                   placeholder="AIza..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at aistudio.google.com</span>
                        </div>

                        <!-- OpenRouter API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openrouter_api_key_container" style="display: none;">
                            <label for="openrouter_api_key">OpenRouter API Key</label>
                            <input type="password" id="openrouter_api_key" name="openrouter_api_key" class="ldr-form-control"
                                   placeholder="sk-or-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at openrouter.ai</span>
                        </div>

                        <!-- xAI API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="xai_api_key_container" style="display: none;">
                            <label for="xai_api_key">xAI API Key</label>
                            <input type="password" id="xai_api_key" name="xai_api_key" class="ldr-form-control"
                                   placeholder="xai-..." autocomplete="off">
                            <span class="ldr-input-help">Get your key at x.ai</span>
                        </div>

                        <!-- IONOS API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="ionos_api_key_container" style="display: none;">
                            <label for="ionos_api_key">IONOS API Key</label>
                            <input type="password" id="ionos_api_key" name="ionos_api_key" class="ldr-form-control"
                                   placeholder="..." autocomplete="off">
                            <span class="ldr-input-help">Get your key from IONOS AI Model Hub</span>
                        </div>

                        <!-- OpenAI Endpoint API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="openai_endpoint_api_key_container" style="display: none;">
                            <label for="openai_endpoint_api_key">Endpoint API Key (Optional)</label>
                            <input type="password" id="openai_endpoint_api_key" name="openai_endpoint_api_key" class="ldr-form-control"
                                   placeholder="Optional, leave empty if not required" autocomplete="off">
                            <span class="ldr-input-help">Leave blank for local servers (llama.cpp, vLLM, LM Studio). Required only for hosted services (OpenRouter, Groq, Together, etc.).</span>
                        </div>

                        <!-- Anthropic Endpoint API Key (hidden by default) -->
                        <div class="ldr-form-group ldr-half" id="anthropic_endpoint_api_key_container" style="display: none;">
                            <label for="anthropic_endpoint_api_key">Endpoint API Key (Optional)</label>
                            <input type="password" id="anthropic_endpoint_api_key" name="anthropic_endpoint_api_key" class="ldr-form-control"
                                   placeholder="Optional, leave empty if not required" autocomplete="off">
                            <span class="ldr-input-help">Leave blank for keyless local Anthropic-compatible servers.</span>
                        </div>

                        <!-- Ollama API Key (hidden by default, optional for authenticated instances) -->
                        <div class="ldr-form-group ldr-half" id="ollama_api_key_container" style="display: none;">
                            <label for="ollama_api_key">Ollama API Key (Optional)</label>
                            <input type="password" id="ollama_api_key" name="ollama_api_key" class="ldr-form-control"
                                   placeholder="Optional, for authenticated instances" autocomplete="off">
                            <span class="ldr-input-help">Only needed for authenticated Ollama instances</span>
                        </div>

                        <!-- LM Studio API Key (hidden by default, optional for authenticated instances) -->
                        <div class="ldr-form-group ldr-half" id="lmstudio_api_key_container" style="display: none;">
                            <label for="lmstudio_api_key">LM Studio API Key (Optional)</label>
                            <input type="password" id="lmstudio_api_key" name="lmstudio_api_key" class="ldr-form-control"
                                   placeholder="Optional, for authenticated instances" autocomplete="off">
                            <span class="ldr-input-help">Only needed if your LM Studio server requires an API key</span>
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Model Selection -->
                        <div class="ldr-form-group ldr-half">
                            {{ render_dropdown(
                                input_id="model",
                                dropdown_id="model-dropdown",
                                placeholder="Enter or select a model",
                                label="Language Model",
                                help_text="Select or enter a custom model name",
                                show_refresh=True,
                                refresh_aria_label="Refresh model list",
                                data_initial_value=settings.llm_model
                            ) }}
                            <span class="ldr-input-help">
                                Picking a local model? Compare community results on the
                                <a href="https://huggingface.co/datasets/local-deep-research/ldr-benchmarks" target="_blank" rel="noopener noreferrer">LDR benchmarks dataset</a>
                                to see which models work well for research.
                            </span>
                        </div>

                        <!-- Search Engine Selection -->
                        <div class="ldr-form-group ldr-half">
                            {{ render_dropdown(
                                input_id="search_engine",
                                dropdown_id="search-engine-dropdown",
                                placeholder="Select a search engine",
                                label="Search Engine",
                                help_text="Select the search engine to use for research",
                                show_refresh=True,
                                refresh_aria_label="Refresh search engine list",
                                data_initial_value=settings.search_tool
                            ) }}
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Search Iterations -->
                        <div class="ldr-form-group ldr-half">
                            <label for="iterations">{{ tooltip("Search Iterations", "Each cycle: AI generates follow-up questions based on what it found, then searches again. Searches run in parallel. More iterations = deeper coverage but longer wait.") }}</label>
                            <input type="number" id="iterations" name="iterations" class="ldr-form-control" min="1" value="{{ settings.search_iterations }}">
                            <span class="ldr-input-help">More iterations = deeper research (even 20+ can make sense for Focused Iteration, depending on context window size)</span>
                        </div>

                        <!-- Questions Per Iteration -->
                        <div class="ldr-form-group ldr-half">
                            <label for="questions_per_iteration">{{ tooltip("Questions Per Iteration", "Follow-up questions per cycle. Multiplies with iterations: 3 questions × 4 iterations = 12 searches. More = broader but slower/costlier.") }}</label>
                            <input type="number" id="questions_per_iteration" name="questions_per_iteration" class="ldr-form-control" min="1" value="{{ settings.search_questions_per_iteration }}">
                            <span class="ldr-input-help">Lower is generally better (1-2 recommended). Prefer increasing iterations for deeper research.</span>
                        </div>
                    </div>

                    <div class="ldr-form-row">
                        <!-- Search Strategy -->
                        <div class="ldr-form-group ldr-full">
                            <label for="strategy">{{ tooltip("Search Strategy", "Source-Based: Full report with inline citations. Focused Quick: Concise Q&A. Focused Comprehensive: Detailed answer with citations. Topic Organization: Groups results by theme.") }}</label>
                            <select id="strategy" name="strategy" class="ldr-form-control">
                                {% for s in strategies %}
                                <option value="{{ s.name }}" {% if settings.search_strategy == s.name %}selected{% endif %}>{{ s.label }}</option>
                                {% endfor %}
                            </select>
                            <span class="ldr-input-help">Focused Iteration works best with >16,000 context window</span>
                        </div>
                    </div>
                </div>

                <!-- Start Research Button -->
                <div class="ldr-form-actions">
                    <button type="submit" class="btn btn-primary" id="start-research-btn"><i aria-hidden="true" class="fas fa-rocket"></i> Start Research</button>
                </div>

                <!-- Audio Notifications -->
                <div class="ldr-form-options">
                    <div class="ldr-form-option">
                        <label for="notification-toggle" class="ldr-checkbox-label">
                            <input type="checkbox" id="notification-toggle" checked>
                            <span class="ldr-checkbox-text">Sound notifications when complete</span>
                        </label>
                    </div>
                </div>
            </form>

            <!-- How Research Works Help Panel -->
            {% call help_panel('research-workflow', 'How Research Works', icon='lightbulb', collapsed=true, dismissible=true) %}
            <div class="ldr-help-steps">
                {{ help_step(1, "Query Analysis", "Your research question is analyzed to identify key concepts and generate initial search queries.") }}
                {{ help_step(2, "Source Discovery", "The search engine finds relevant sources. Each iteration generates follow-up questions to explore the topic deeper.") }}
                {{ help_step(3, "Content Analysis", "The AI reads and analyzes each source, extracting key information relevant to your query.") }}
                {{ help_step(4, "Report Generation", "Findings are synthesized into a comprehensive report with citations and references.") }}
            </div>
            {{ help_tip("<strong>Tip:</strong> For academic research, select ArXiv or PubMed as your search engine. For general topics, SearXNG provides the broadest coverage.") }}
            {% endcall %}
        </div>
    </div>
</div>
{% endblock %}

{% block component_scripts %}
<script defer src="/static/js/components/custom_dropdown.js"></script>
<script defer src="/static/js/components/research.js"></script>
<script defer src="/static/js/research_form.js"></script>
<script defer src="/static/js/pdf_upload_handler.js"></script>
{% endblock %}