drugs/core/templates/window-content/search.html

<form class="skipEmptyFields" method="POST" hx-post="{% url 'search' %}"
  hx-trigger="change"
  hx-target="#widgets-here"
  hx-swap="innerHTML"
  hx-indicator="#spinner">
  {% csrf_token %}
  <div class="columns">
    <div class="column">
      <div class="field has-addons">
        <div id="query" class="control is-expanded has-icons-left">
          <input
            hx-post="{% url 'search' %}"
            hx-trigger="keyup changed delay:200ms"
            hx-target="#widgets-here"
            hx-swap="innerHTML"
            name="query"
            value="{{ params.query }}"
            class="input"
            type="text"
            placeholder="Search something">
          <span class="icon is-small is-left">
            <i class="fas fa-magnifying-glass"></i>
          </span>
        </div>
        <div class="control">
          <div class="field">
            <button
              id="search"
              class="button is-fullwidth"
              hx-post="{% url 'search' %}"
              hx-trigger="click"
              hx-target="#widgets-here"
              hx-swap="innerHTML">
              Search
            </button>
          </div>
        </div>
      </div>
    </div>
    <div class="column is-3">
      <div class="nowrap-parent">
        <div
          data-script="on click toggle .is-hidden on #options"
          class="button is-right nowrap-child">
          Options
        </div>
        <div class="nowrap-child">
          <span id="spinner" class="button is-light has-text-link is-loading htmx-indicator">Static</span>
        </div>
      </div>
    </div>
  </div>
  <div id="options" class="block is-hidden">
    <div class="columns is-multiline">
      <div class="column is-narrow">
        <div class="field has-addons">
          <div class="control has-icons-left">
            <span class="select">
              <select name="size">
                {% for size in sizes %}
                  {% if size == params.size %}
                    <option selected value="{{ size }}">{{ size }}</option>
                  {% else %}
                    <option value="{{ size }}">{{ size }}</option>
                  {% endif %}
                {% endfor %}
              </select>
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </span>
          </div>
          <p class="control">
            <a class="button is-static">
              results
            </a>
          </p>
        </div>
      </div>
      <div class="column is-narrow">
        <div class="field has-addons block">
          <div class="control has-icons-left">
            <span class="select">
              <select id="source" name="source">
                {% if params.source == 'experiences' %}
                  <option selected value="experiences">Experiences</option>
                {% else %}
                  <option value="experiences">Experiences</option>
                {% endif %}

                {% if params.source == 'Other' %}
                  <option selected value="other">Other</option>
                {% else %}
                  <option value="other">Other</option>
                {% endif %}

                {% if params.source == None %}
                  <option selected value="substances">Substances</option>
                {% elif params.source == 'substances' %}
                  <option selected value="substances">Substances</option>
                {% else %}
                  <option value="substances">Substances</option>
                {% endif %}

                {% if params.source == 'all' %}
                  <option selected value="all">All</option>
                {% else %}
                  <option value="all">All</option>
                {% endif %}

              </select>
              <span class="icon is-small is-left">
                <i class="fas fa-magnifying-glass"></i>
              </span>
            </span>
          </div>
          <p class="control">
            <a class="button is-static">
              source
            </a>
          </p>
        </div>
      </div>
      <div class="column is-narrow">
        <div id="date">
          <div class="field">
            <div class="control">
              <input type="date" name="dates" value="{{ params.date }}">
              <script>
                var options = {
                  "type": "datetime",
                  "isRange": true,
                  "color": "info",
                  "validateLabel": "Save",
                  "dateFormat": "yyyy-MM-dd",
                  "startDate": "{{ params.from_date|escapejs }}",
                  "startTime": "{{ params.from_time|escapejs }}",
                  "endDate": "{{ params.to_date|escapejs }}",
                  "endTime": "{{ params.to_time|escapejs }}",
                  "displayMode": "dialog"
                };
                // Initialize all input of type date
                var calendars = bulmaCalendar.attach('[type="date"]', options);

                // Loop on each calendar initialized
                for(var i = 0; i < calendars.length; i++) {
                  // Add listener to select event
                  calendars[i].on('save', date => {
                    htmx.trigger("#search", "click");
                  });
                }
              </script>
            </div>
          </div>
          <div class="control">
            <label class="radio button has-text-link">
              <input
                type="radio"
                value="desc"
                name="sorting"
                {% if params.sorting == None %}
                  checked
                {% elif params.sorting == 'desc' %}
                  checked
                {% endif %}>
              <span class="icon" data-tooltip="Sort descending">
                <i class="fa-solid fa-sort-down"></i>
              </span>
            </label>
            <label class="radio button">
              <input
                type="radio"
                value="asc"
                name="sorting"
                {% if params.sorting == 'asc' %}
                  checked
                {% endif %}>
              <span class="icon" data-tooltip="Sort ascending">
                <i class="fa-solid fa-sort-up"></i>
              </span>
            </label>
            <label class="radio button">
              <input
                type="radio"
                value="none"
                name="sorting"
                {% if params.sorting == 'none' %}
                  checked
                {% endif %}>
              <span class="icon" data-tooltip="No sort">
                <i class="fa-solid fa-sort"></i>
              </span>
            </label>
          </div>
        </div>
      </div>

      {% if params.rule is None %}
        <div class="column is-narrow rounded-tooltip">
          <div class="field has-addons">
            <div class="control has-icons-left">
              <span class="select is-warning">
                <select {% if not user.is_superuser %}disabled{% endif %} id="index" name="index">
                  {% if params.index == 'main' %}
                    <option selected value="main">Main</option>
                  {% elif params.index == None %}
                    <option selected value="main">Main</option>
                  {% else %}
                    <option value="main">Main</option>
                  {% endif %}

                  {% if params.index == 'internal' %}
                    <option selected value="internal">Internal</option>
                  {% else %}
                    <option value="internal">Internal</option>
                  {% endif %}

                  {% if params.index == 'meta' %}
                    <option selected value="meta">Meta</option>
                  {% else %}
                    <option value="meta">Meta</option>
                  {% endif %}

                  {% if params.index == 'restricted' %}
                    <option selected value="restricted">Restricted</option>
                  {% else %}
                    <option value="restricted">Restricted</option>
                  {% endif %}

                </select>
                <span class="icon is-small is-left">
                  <i class="fas fa-magnifying-glass"></i>
                </span>
              </span>
            </div>
            <p class="control">
              <a class="button is-static">
                index
              </a>
            </p>
          </div>
          {% if not user.is_superuser %}
            <span class="tooltiptext tag is-danger is-light">No access</span>
          {% endif %}
        </div>
      {% endif %}

    </div>
  </div>
  <div class="block">
    <input
      hx-trigger="change"
      hx-post="{% url 'search' %}"
      hx-target="#widgets-here"
      hx-swap="innerHTML"
      id="tags"
      class="input"
      type="tags"
      name="tags"
      placeholder="Tag search: nick: john"
      value="{{ params.tags }}">
  </div>
  <div class="is-hidden"></div>
  {% if params.rule is not None %}
    <div style="display:none;">
      <input name="rule" value="{{ params.rule }}">
    </div>
  {% endif %}
</form>