Update

web/templates/search.html

@@ -1,36 +1,41 @@
-
 {% 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 (supports * and ?)</label>
-          <input type="text" name="q" value="{{ q|default:'' }}" placeholder="e.g., Default, Organization or Matt 12:30 or *loyal*" />
+          <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 style="display:grid; grid-template-columns: 1fr 1fr; gap:6px; padding-top:6px;">
-            {% for f in fields %}
-              <label><input type="checkbox" name="fields" value="{{ f }}" {% if f in selected %}checked{% endif %}> {{ f }}</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:12px; display:flex; gap:10px; justify-content:flex-end;">
-        <a class="btn" href="/search/">Clear</a>
+      <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="stats" style="margin-top:12px;">
-    <div>Total entries: <strong>{{ total }}</strong></div>
-    {% if results_count %}<div>Results: <strong>{{ results_count }}</strong></div>{% endif %}
-  </div>
-  {% if results_count %}
-  <div class="panel" style="margin-top:12px;">
-    <p>Opening first result…</p>
-  </div>
-  {% endif %}
+  <div class="spacer"></div>
+  <div class="small">Total entries in database: <strong>{{ total }}</strong></div>
 {% endblock %}