{% extends "base.html" %}
{% block title %}Search{% if query %}: {{ query }}{% endif %} — Python 108{% endblock %}
{% block content %}
<div class="search-page">

  <!-- Search form (big, centred when no results yet) -->
  <div class="search-hero {% if not query %}search-hero-centered{% endif %}">
    <h1 class="search-title">🔍 Search Python 108</h1>
    <form action="{{ url_for('search') }}" method="GET" class="search-form">
      <input type="text" name="q" id="search-input" class="search-input"
             value="{{ query }}"
             placeholder="Search programs, topics, concepts…"
             autofocus autocomplete="off">
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
    {% if not query %}
    <div class="search-suggestions">
      <span class="sug-label">Try:</span>
      {% for sug in ['recursion','list comprehension','decorator','OOP','exception','lambda','generator','dictionary'] %}
      <a href="{{ url_for('search', q=sug) }}" class="sug-chip">{{ sug }}</a>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <!-- Results -->
  {% if query %}
  <div class="search-meta">
    {% if results %}
      <strong>{{ results|length }}</strong> result{{ 's' if results|length != 1 else '' }} for
      "<strong>{{ query }}</strong>"
    {% else %}
      No results found for "<strong>{{ query }}</strong>"
    {% endif %}
  </div>

  {% if results %}
  <div class="search-results">
    {% for r in results %}
    {% set p = r.program %}
    <a href="{{ url_for('program', n=p['n']) }}" class="search-result-card">
      <div class="sr-left">
        <span class="sr-num">#{{ p['n'] }}</span>
        <span class="sr-mod-badge">{{ p['mod'] }}</span>
      </div>
      <div class="sr-body">
        <div class="sr-title">{{ p['title'] }}</div>
        <div class="sr-what">{{ p['what'] }}</div>
        <div class="sr-learns">
          {% for l in p['learns'] %}
          <span class="sr-learn-tag">{{ l }}</span>
          {% endfor %}
        </div>
      </div>
      <div class="sr-arrow">→</div>
    </a>
    {% endfor %}
  </div>

  {% else %}
  <div class="empty-state" style="margin-top:2rem">
    <div class="empty-icon">🔍</div>
    <div class="empty-title">No programs match "{{ query }}"</div>
    <div class="empty-sub">Try a shorter term — e.g. "loop" instead of "for loop iteration"</div>
    <div class="search-suggestions" style="justify-content:center;margin-top:1rem">
      {% for sug in ['function','class','list','string','file','error'] %}
      <a href="{{ url_for('search', q=sug) }}" class="sug-chip">{{ sug }}</a>
      {% endfor %}
    </div>
  </div>
  {% endif %}
  {% endif %}

</div>
{% endblock %}