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