Illustrations/web/templates/search.html

{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}

{% block content %}
<script src="{% static 'core/search-help.js' %}"></script>
<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> -->

  <!-- Search Help Dropdown -->
  <div class="search-help">
    <button class="help-toggle" type="button" onclick="this.nextElementSibling.classList.toggle('open')">
      ❓ Search Tips
    </button>
    <div class="help-content">
      <h3>How to Use Search Operators</h3>
      <ul>
        <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
            <em>Example:</em> <code>faith</code></li>

        <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
            <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>

        <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
            <em>Example:</em> <code>love OR kindness</code></li>

        <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
            <em>Example:</em> <code>hope -future</code></li>

        <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
            <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>

        <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
            <em>Example:</em> <code>John 3:16</code></li>
      </ul>
      <p><strong>Tip:</strong> You can combine these for powerful searches.<br>
         <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
    </div>
  </div>

<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>

    <!-- Help button stays inline -->
    <button
      class="btn btn-secondary help-toggle"
      type="button"
      data-target="#search-help-panel"
    >
      Help
    </button>
  </div>

  <!-- Help panel lives OUTSIDE the row so it doesn't shrink the input -->
  <div id="search-help-panel" class="help-panel">
    <h3>How to Use Search Operators</h3>
    <ul>
      <li><strong>Simple keyword</strong> — type any word to find entries that contain it.<br>
          <em>Example:</em> <code>faith</code></li>
      <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
          <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
      <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
          <em>Example:</em> <code>love OR kindness</code></li>
      <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
          <em>Example:</em> <code>hope -future</code></li>
      <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
          <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
      <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
          <em>Example:</em> <code>John 3:16</code></li>
    </ul>
    <p><strong>Tip:</strong> Combine operators:<br>
       <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
  </div>
</form>


    <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>
    <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>

<!-- Inline, scoped styles for the help dropdown -->
<style>
  .search-help { margin-bottom: 12px; }
  .help-toggle {
    background: var(--brand);
    color: #fff;
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
  }
  .help-toggle:hover { background: var(--brand-800); }
  .help-content {
    display: none;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.5;
  }
  .help-content.open { display: block; }
  .help-content code {
    background: #f3f4f6;
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 90%;
  }
  .help-content h3 {
    margin: 0 0 8px;
    font-size: 16px;
  }
  .help-content ul { margin: 0 0 8px 18px; }
</style>
{% endblock %}