{% extends "base.html" %}
{% block title %}Search{% endblock %}
{% block content %}
<h1>Cerca</h1>
<p style="color:var(--muted);margin-bottom:1.2rem;font-family:system-ui,sans-serif;font-size:0.92rem;">
  Cerca nella knowledge base per termini o concetti.
</p>

<div class="card">
  <form action="/search" method="get">
    <div class="row">
      <div>
        <label>Query</label>
        <input type="text" name="q" value="{{ query }}" placeholder="es. serie di Fourier, limiti, derivate..." required>
      </div>
      <div>
        <label>Modalita</label>
        <select name="mode">
          <option value="hybrid" {{ 'selected' if mode == 'hybrid' }}>Hybrid (BM25 + semantic)</option>
          <option value="lexical" {{ 'selected' if mode == 'lexical' }}>Lexical (BM25)</option>
          <option value="semantic" {{ 'selected' if mode == 'semantic' }}>Semantic</option>
        </select>
      </div>
      <div>
        <label>Corso</label>
        <input type="text" name="course" value="{{ course }}" placeholder="opzionale">
      </div>
      <div style="min-width:70px;">
        <label>Top-K</label>
        <input type="text" name="top_k" value="{{ top_k }}" style="width:70px;">
      </div>
    </div>
    <div style="margin-top:1rem;">
      <button type="submit">Cerca</button>
    </div>
  </form>
</div>

{% if error %}
<div class="empty-state" style="border-left:3px solid var(--red);padding:1rem;">
  {{ error }}
</div>
{% elif results %}
<h2>Risultati ({{ results|length }})</h2>
{% for r in results %}
<div class="card">
  <div style="display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0.5rem;">
    <strong style="color:var(--accent);">{{ r.filename }}</strong>
    <span style="font-family:system-ui,sans-serif;font-size:0.8rem;color:var(--muted);">
      {{ r.score_type }} score: {{ '%.3f'|format(r.score) }} &middot; {{ r.course }}
    </span>
  </div>
  <div style="font-family:system-ui,sans-serif;font-size:0.8rem;color:var(--muted);margin-bottom:0.3rem;">
    Topic: {{ r.topic }}
  </div>
  <div class="snippet">{{ r.snippet }}</div>
</div>
{% endfor %}
{% elif query %}
<div class="empty-state">Nessun risultato per "{{ query }}".</div>
{% endif %}
{% endblock %}