{% extends "layouts/public.html" %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs" aria-label="Breadcrumb">
  <a href="/" class="hover:text-white transition-colors">Home</a>
  {% include "components/crumb_sep.html" %}
  <a href="{% url 'repo_documents:browse' %}" class="hover:text-white transition-colors">Repository</a>
  {% include "components/crumb_sep.html" %}
  <span>Search</span>
</nav>
{% endblock %}
{% block content %}

<header class="repo-page-head">
  <p class="repo-page-head__kicker">RUFORUM · Repository search</p>
  <h1 class="repo-page-head__title">Search the knowledge archive</h1>
  <p class="repo-page-head__sub">Full-text search across titles, abstracts, authors, and indexed document content. Press <kbd class="rounded border border-ruforum-border bg-white px-1.5 py-0.5 text-[11px] font-meta">/</kbd> to focus the search.</p>
</header>

<form method="get" id="search-form" class="mb-3">
  <div class="repo-search">
    {% include "components/icon.html" with name="search" css="repo-search__icon" %}
    <input type="search" name="q" value="{{ q }}"
           id="repo-search-input"
           class="repo-search__input"
           placeholder="Search by title, author, abstract, or full text…"
           aria-label="Search the repository — press / to focus"
           aria-keyshortcuts="/"
           hx-get="{% url 'repo_search:search' %}"
           hx-trigger="keyup changed delay:300ms, search"
           hx-target="#search-results"
           hx-include="closest form"
           hx-indicator="#repo-search-spin"
           hx-push-url="true"
           autofocus>
    <button type="submit" class="repo-search__submit">
      Search
      {% include "components/icon.html" with name="chevron-right" css="h-3.5 w-3.5" stroke_width="2" %}
    </button>
  </div>

  {% comment %}
    FRREP-SR001/004 — author facet plus type/collection/language filters,
    mirroring browse.html's dynamic filter rail (all round-trip via HTMX).
  {% endcomment %}
  <div class="mt-2 flex flex-wrap items-end gap-3">
    <div class="flex flex-col gap-1">
      <label for="repo-author-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Author</label>
      <input type="text" name="author" value="{{ request.GET.author }}"
             id="repo-author-filter"
             class="!w-48 !py-1.5 !text-sm"
             placeholder="e.g. Kato"
             aria-label="Filter results by author name"
             hx-get="{% url 'repo_search:search' %}"
             hx-trigger="keyup changed delay:300ms"
             hx-target="#search-results"
             hx-include="closest form"
             hx-indicator="#repo-search-spin"
             hx-push-url="true">
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-type-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Document type</label>
      <select name="type" id="repo-type-filter" class="!py-1.5 !text-sm"
              hx-get="{% url 'repo_search:search' %}" hx-trigger="change" hx-target="#search-results"
              hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
        <option value="">All types</option>
        {% for value, label in document_type_choices %}
          <option value="{{ value }}" {% if request.GET.type == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-collection-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Collection</label>
      <select name="collection" id="repo-collection-filter" class="!py-1.5 !text-sm"
              hx-get="{% url 'repo_search:search' %}" hx-trigger="change" hx-target="#search-results"
              hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
        <option value="">All collections</option>
        {% for col in collection_choices %}
          <option value="{{ col.slug }}" {% if request.GET.collection == col.slug %}selected{% endif %}>{{ col.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-language-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Language</label>
      <select name="language" id="repo-language-filter" class="!py-1.5 !text-sm"
              hx-get="{% url 'repo_search:search' %}" hx-trigger="change" hx-target="#search-results"
              hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
        <option value="">Any language</option>
        {% for value, label in language_choices %}
          <option value="{{ value }}" {% if request.GET.language == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <details class="repo-more-filters ml-auto" {% if advanced_filters_active %}open{% endif %}>
      <summary class="flex cursor-pointer list-none items-center gap-1 pb-2 font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-primary hover:text-ruforum-primary-hover">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"/></svg>
        More filters
      </summary>
    </details>
    {% if request.GET.author or request.GET.type or request.GET.collection or request.GET.language or advanced_filters_active %}
      <a href="?{% if q %}q={{ q|urlencode }}{% endif %}" class="font-meta text-[11px] text-ruforum-primary hover:text-ruforum-primary-hover pb-2">Clear filters</a>
    {% endif %}
  </div>

  <div class="mt-2 flex-wrap items-end gap-3 {% if advanced_filters_active %}flex{% else %}hidden{% endif %}" data-more-filters>
    <div class="flex flex-col gap-1">
      <label for="repo-yearfrom-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Year from</label>
      <input type="number" name="year_from" value="{{ request.GET.year_from }}" id="repo-yearfrom-filter" class="!w-24 !py-1.5 !text-sm tabular-nums" placeholder="2018"
             hx-get="{% url 'repo_search:search' %}" hx-trigger="change, keyup changed delay:400ms" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-yearto-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Year to</label>
      <input type="number" name="year_to" value="{{ request.GET.year_to }}" id="repo-yearto-filter" class="!w-24 !py-1.5 !text-sm tabular-nums" placeholder="2026"
             hx-get="{% url 'repo_search:search' %}" hx-trigger="change, keyup changed delay:400ms" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-subject-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Subject keyword</label>
      <input type="text" name="subject" value="{{ request.GET.subject }}" id="repo-subject-filter" class="!w-48 !py-1.5 !text-sm" placeholder="e.g. maize"
             hx-get="{% url 'repo_search:search' %}" hx-trigger="keyup changed delay:400ms" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-license-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Licence</label>
      <select name="license" id="repo-license-filter" class="!py-1.5 !text-sm"
              hx-get="{% url 'repo_search:search' %}" hx-trigger="change" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
        <option value="">Any licence</option>
        {% for value, label in license_choices %}
          <option value="{{ value }}" {% if request.GET.license == value %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-institution-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Institution</label>
      <select name="publisher" id="repo-institution-filter" class="!py-1.5 !text-sm max-w-[14rem]"
              hx-get="{% url 'repo_search:search' %}" hx-trigger="change" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
        <option value="">Any institution</option>
        {% for pub in publisher_choices %}
          <option value="{{ pub }}" {% if request.GET.publisher == pub %}selected{% endif %}>{{ pub }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="flex flex-col gap-1">
      <label for="repo-grant-filter" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Grant reference</label>
      <input type="text" name="grant" value="{{ request.GET.grant }}" id="repo-grant-filter" class="!w-40 !py-1.5 !text-sm tabular-nums" placeholder="GR-2026-…"
             hx-get="{% url 'repo_search:search' %}" hx-trigger="keyup changed delay:400ms" hx-target="#search-results" hx-include="closest form" hx-indicator="#repo-search-spin" hx-push-url="true">
    </div>
  </div>
</form>

<script>
  // Toggle the secondary filter row from the "More filters" disclosure without
  // relying on the <details> element's own open panel (keeps the controls in
  // normal document flow / the HTMX form).
  (function () {
    var form = document.getElementById('search-form');
    if (!form) return;
    var details = form.querySelector('.repo-more-filters');
    var panel = form.querySelector('[data-more-filters]');
    if (!details || !panel) return;
    details.addEventListener('toggle', function () {
      panel.classList.toggle('hidden', !details.open);
      panel.classList.toggle('flex', details.open);
    });
  })();
</script>

<div class="mb-6 flex flex-wrap items-center justify-between gap-3">
  <p class="results-toolbar__count flex items-center gap-2">
    <span>
    {% if q %}
      <strong>{{ paginator.count|default:0 }}</strong> result{{ paginator.count|default:0|pluralize }} for &ldquo;<span class="text-ruforum-text font-semibold">{{ q }}</span>&rdquo;
    {% else %}
      <strong>{{ paginator.count|default:0 }}</strong> document{{ paginator.count|default:0|pluralize }} indexed
    {% endif %}
    </span>
    {% include "components/inline_spinner.html" with spin_id="repo-search-spin" %}
  </p>
  <div class="flex items-center gap-2">
    <a href="{% url 'repo_search:advanced' %}" class="inline-flex items-center gap-1 whitespace-nowrap text-sm font-medium text-ruforum-primary hover:text-ruforum-primary-hover">
      <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v18M3 12h18"/></svg>
      Advanced
    </a>
    <span class="text-ruforum-border-strong" aria-hidden="true">·</span>
    <label for="sort-select" class="font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">Sort</label>
    <select id="sort-select" name="sort" form="search-form" onchange="this.form.submit()" class="!py-1.5 !text-sm">
      <option value="relevance" {% if request.GET.sort == 'relevance' or not request.GET.sort %}selected{% endif %}>Relevance</option>
      <option value="recent" {% if request.GET.sort == 'recent' %}selected{% endif %}>Most recent</option>
      <option value="oldest" {% if request.GET.sort == 'oldest' %}selected{% endif %}>Oldest</option>
      <option value="title" {% if request.GET.sort == 'title' %}selected{% endif %}>Title A-Z</option>
      <option value="title_desc" {% if request.GET.sort == 'title_desc' %}selected{% endif %}>Title Z-A</option>
      <option value="author" {% if request.GET.sort == 'author' %}selected{% endif %}>Author name</option>
      <option value="downloads" {% if request.GET.sort == 'downloads' %}selected{% endif %}>Most downloaded</option>
    </select>
    {% if user.is_authenticated and request.GET %}
      <span class="text-ruforum-border-strong" aria-hidden="true">·</span>
      <a href="{% url 'repo_documents:saved_search_create' %}?{{ request.GET.urlencode }}"
         class="inline-flex items-center gap-1 whitespace-nowrap text-sm font-medium text-ruforum-primary hover:text-ruforum-primary-hover">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75"><path stroke-linecap="round" stroke-linejoin="round" d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z"/></svg>
        Save search
      </a>
    {% endif %}
  </div>
</div>

<section id="search-results">
  {% include "search/partials/search_results.html" %}
</section>

<div class="mt-8">
  {% include "components/pagination.html" %}
</div>

{% include "components/repo_search_shortcut.html" %}

{% endblock %}