{% 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 AND (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 opt in field_options %}
              <label class="badge">
                <input type="checkbox" name="{{ opt.name }}" {% if opt.checked %}checked{% endif %}/> {{ opt.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 %}