{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container">
  <h1 class="page-title">Search</h1>
  <p class="page-subtitle">Use wildcards: <code>*</code> matches many characters (e.g., <code>*love*</code>), <code>?</code> matches one. By default we search Subject, Illustration, and Application.</p>

  <form method="get" class="search-form">
    <div class="search-row">
      <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
      <button class="btn btn-primary">Search</button>
    </div>

    <div class="filter-row">
      {% for f in field_options %}
        <label class="check-pill">
          <input type="checkbox" name="{{ f.name }}" {% if f.checked %}checked{% endif %}>
          <span>{{ f.label }}</span>
        </label>
      {% endfor %}
    </div>

    <div class="muted small">Total entries: {{ total }}</div>
  </form>

  {% if ran_search and result_count == 0 %}
    <div class="empty-state">
      <div class="empty-title">No results</div>
      <div class="empty-subtitle">Try broadening your terms or enabling more fields above.</div>
    </div>
  {% endif %}
</div>
{% endblock %}