{% extends "base.html" %}
{% block title %}EnviroDEX™ | Search{% endblock %}

{% block content %}
{% if not user.is_authenticated %}
<div class="row g-4">
    <div class="col-lg-8">
        <h1 class="h3 mb-3">Search Datasets</h1>
        <p class="lead mb-4">Discover environmental data across multiple disciplines. Search by keywords, DOIs, or browse collections.</p>
        <a href="{% url 'login' %}?next={% url 'search' %}" class="btn btn-primary">Login to Continue</a>
    </div>
</div>
{% else %}
<!-- UI-2 Fix: Added page header for consistency -->
<h1 class="h3 mb-3">Search Datasets</h1>
<p class="lead mb-4">Discover environmental data across multiple disciplines. Search by keywords, DOIs, or browse collections.</p>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <span class="fw-semibold">Search proxy DOIs</span>
                <span class="badge text-bg-secondary">Prototype</span>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-3">
                    Search across filesystem and database uploads. Use any DOI fragment, then download directly from the results.
                </p>
                <form id="searchForm" class="row gy-3 gx-2 align-items-end">
                    <div class="col-md-5">
                        <label for="searchQuery" class="form-label">DOI fragment</label>
                        <input id="searchQuery" name="query" type="text" class="form-control" placeholder="10.9876/envirodex" required>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <label for="sourceSelect" class="form-label">Source</label>
                        <select id="sourceSelect" name="source" class="form-select">
                            <option value="both" selected>All sources</option>
                            <option value="filesystem">Filesystem only</option>
                            <option value="database">Database only</option>
                        </select>
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <label for="limitInput" class="form-label">Limit</label>
                        <input id="limitInput" name="limit" type="number" min="1" max="50" value="20" class="form-control" title="Result limit">
                    </div>
                    <div class="col-md-2 col-sm-6">
                        <div class="form-check mt-4">
                            <input id="includeMetadata" name="include_metadata" class="form-check-input" type="checkbox">
                            <label class="form-check-label" for="includeMetadata">Metadata</label>
                        </div>
                    </div>
                    <div class="col-12 d-flex gap-2">
                        <button type="submit" class="btn btn-primary">Search</button>
                        <button type="button" id="downloadSelected" class="btn btn-outline-secondary">Download selected</button>
                    </div>
                </form>

                <div id="searchStatus" class="alert alert-info mt-3 mb-2" role="alert">Enter a DOI fragment to begin.</div>
                <div id="searchLoader" class="spinner-border text-primary d-none" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div id="resultsCount" class="text-muted small mb-2"></div>
                <div id="searchResults" class="d-flex flex-column gap-2"></div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card h-100 shadow-sm">
            <div class="card-header bg-white">
                <span class="fw-semibold">Testing checklist</span>
            </div>
            <div class="card-body">
                <ul class="mb-3">
                    <li>Search with a full or partial proxy DOI.</li>
                    <li>Toggle sources: filesystem vs database vs both.</li>
                    <li>Download a single DOI or select multiple and download.</li>
                    <li>Inspect metadata payloads when available.</li>
                </ul>
                <p class="small text-muted mb-0">Results come from <code>/api/v1/search/dois</code>, and downloads call <code>/api/v1/downloads/files</code>.</p>
            </div>
        </div>
    </div>
</div>

{% load static %}
<script src="{% static 'js/search.js' %}"></script>
{% endif %}
{% endblock %}