{% extends "layouts/dashboard.html" %}
{% block title %}Search{% if query %} — {{ query }}{% endif %} · IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">Search</span>
</nav>
{% endblock %}
{% block content %}
<section class="hero-strip mb-6">
  <div class="hero-strip__lead">
    <p class="hero-strip__eyebrow">IILMP · Search</p>
    <h1 class="hero-strip__title">Search the platform</h1>
    <p class="hero-strip__lede">Find programmes, funding calls, products, showcase events, mentors, and repository documents in one place.</p>
  </div>
</section>

<form method="get" action="{% url 'core:global_search' %}" class="mb-6">
  <div class="flex items-center gap-2">
    <label class="search-field search-field--lg search-field--full flex-1">
      <svg class="search-field__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
      <input type="search" name="q" value="{{ query }}" placeholder="Search programmes, products, events, mentors, documents…"
             autofocus class="search-field__input">
    </label>
    <button type="submit" class="btn-primary shrink-0">Search</button>
  </div>
</form>

{% if query %}
  {% if sections %}
    <p class="mb-4 font-meta text-xs uppercase tracking-wider text-ruforum-text-muted">{{ total }} result{{ total|pluralize }} for “{{ query }}”</p>
    <div class="grid gap-4 lg:grid-cols-2">
      {% for section in sections %}
        <div class="card"><div class="card-section">
          <div class="card-section__head">
            <div><h3 class="card-section__title">{{ section.title }}</h3></div>
            <span class="card-section__aside">{{ section.items|length }}</span>
          </div>
          <ul class="divide-y divide-ruforum-border/60">
            {% for item in section.items %}
              <li>
                <a href="{{ item.href }}" class="group flex items-center justify-between gap-3 px-1 py-2.5 transition-colors hover:bg-ruforum-warm-hover rounded-lg">
                  <div class="min-w-0">
                    <p class="truncate text-sm font-medium text-ruforum-text group-hover:text-ruforum-primary">{{ item.label }}</p>
                    {% if item.sublabel %}<p class="truncate font-meta text-[10px] uppercase tracking-wider text-ruforum-text-muted">{{ item.sublabel }}</p>{% endif %}
                  </div>
                  <svg class="h-4 w-4 shrink-0 text-ruforum-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-ruforum-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if section.browse_url %}
            <a href="{{ section.browse_url }}" class="mt-2 inline-flex items-center gap-1 font-meta text-[0.7rem] font-semibold uppercase tracking-wider text-ruforum-primary hover:underline">{{ section.browse_label }} →</a>
          {% endif %}
        </div></div>
      {% endfor %}
    </div>
  {% else %}
    {% include "components/empty_state.html" with heading="No results" subtext="Nothing matched your search — try different keywords or check the module pages directly." %}
  {% endif %}
{% else %}
  <p class="text-sm text-ruforum-text-muted">Type at least two characters and press Search.</p>
{% endif %}
{% endblock %}