{% extends "base.html" %}
{% block title %}Search - Illustrations DB{% endblock %}
{% block content %}
  <div class="panel">
    <h1>Search</h1>
    <p class="small"><strong>How to search:</strong> Type words or phrases, use wildcards, and choose which fields to search.
    <br/>Examples: <code>faith</code> finds entries containing “faith”; <code>*faith*</code> uses wildcards; <code>"exact phrase"</code> matches the phrase; multiple words are ANDed (e.g., <code>faith loyalty</code>).</p>
    <form method="get" action="/search/">
      <div class="row">
        <div>
          <label>Search terms</label>
          <input type="text" name="q" value="{{ q|default:'' }}" placeholder="Type words, phrases, or wildcards…" />
        </div>
        <div>
          <label>Fields to search</label>
          <div class="chips">
            {% for field,label,checked in [
              ('subject','Subject', selected.subject),
              ('illustration','Illustration', selected.illustration),
              ('application','Application', selected.application),
              ('scripture_raw','Scripture', selected.scripture_raw),
              ('source','Source', selected.source),
              ('talk_title','Talk Title', selected.talk_title),
              ('talk_number','Talk Number', selected.talk_number),
              ('entry_code','Code', selected.entry_code),
            ] %}
              <label class="badge">
                <input type="checkbox" name="{{ field }}" {% if checked %}checked{% endif %}/> {{ label }}
              </label>
            {% endfor %}
          </div>
        </div>
      </div>
      <div style="margin-top:16px; display:flex; gap:10px; justify-content:flex-end;">
        <button class="btn primary" type="submit">Search</button>
      </div>
    </form>
  </div>
  <div class="spacer"></div>
  <div class="small">Total entries in database: <strong>{{ total }}</strong></div>
{% endblock %}