Files
penracourses/sbas/templates/sbas/search.html
T

42 lines
1.6 KiB
HTML

{% 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 %}