Add question search functionality with HTMX support for dynamic results

sbas/templates/sbas/partials/_question_search_results.html

@@ -0,0 +1,37 @@
+{# partial: list of questions for HTMX search results #}
+<div class="list-group">
+{% if questions %}
+  {% for question in questions %}
+    <a href="{{ question.get_absolute_url }}" class="list-group-item list-group-item-action">
+      <div class="d-flex w-100 justify-content-between">
+        <h6 class="mb-1">{{ question.title|default:question.get_stem_stripped|truncatechars:80 }}</h6>
+        <small class="text-muted">#{{ question.pk }}</small>
+      </div>
+
+      <div class="mb-1">
+        {% if question.author.all %}
+          <small class="text-muted me-2">By {{ question.author.all|join:", " }}</small>
+        {% endif %}
+        {% if question.category %}<span class="badge bg-secondary me-1">{{ question.category.category }}</span>{% endif %}
+        {% if question.frcr_appropriate %}<span class="badge bg-info text-dark me-1">FRCR</span>{% endif %}
+      </div>
+
+      <div class="mb-1">
+        {% for c in question.condition.all|slice:":3" %}
+          <span class="badge bg-light text-dark me-1">{{ c.name }}</span>
+        {% endfor %}
+        {% for p in question.presentation.all|slice:":3" %}
+          <span class="badge bg-light text-dark me-1">{{ p.name }}</span>
+        {% endfor %}
+        {% for s in question.subspecialty.all|slice:":3" %}
+          <span class="badge bg-light text-dark me-1">{{ s.name }}</span>
+        {% endfor %}
+      </div>
+
+      <p class="mb-1 text-truncate">{{ question.stem|striptags|truncatechars:160 }}</p>
+    </a>
+  {% endfor %}
+{% else %}
+  <div class="list-group-item">No questions found</div>
+{% endif %}
+</div>

sbas/templates/sbas/search.html

@@ -0,0 +1,41 @@
+{% extends 'sbas/base.html' %}
+
+{% block content %}
+<div class="container my-4">
+  <div class="row">
+    <div class="col-12">
+      <h2 class="mb-3">SBAs Question Search</h2>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12 col-md-8">
+      <div class="card">
+        <div class="card-body">
+          <h5 class="card-title">Search questions</h5>
+          <div class="mb-2">
+            <div class="input-group">
+              <input class="form-control" id="sbas-question-search-input" name="q" type="search"
+                     placeholder="Search questions by stem, answers, category or tags"
+                     hx-get="{% url 'sbas:question_search_partial' %}"
+                     hx-trigger="input changed delay:400ms, keyup[key=='Enter']"
+                     hx-target="#sbas-question-search-results"
+                     hx-indicator="#sbas-question-search-indicator" />
+              <span class="input-group-text" id="sbas-question-search-indicator" aria-hidden="true">
+                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+                <span class="visually-hidden">Loading</span>
+              </span>
+            </div>
+          </div>
+          <style>
+            #sbas-question-search-indicator { display: none; }
+            #sbas-question-search-indicator.htmx-request { display: inline-flex; align-items: center; }
+          </style>
+          <div id="sbas-question-search-results">
+            {% include 'sbas/partials/_question_search_results.html' with questions=None %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}