neptune/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 == 'irc' %}
                  <option selected value="irc">IRC</option>
                {% else %}
                  <option value="irc">IRC</option>
                {% endif %}

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

                {% if params.source == None %}
                  <option selected value="4ch">4chan</option>
                {% elif params.source == '4ch' %}
                  <option selected value="4ch">4chan</option>
                {% else %}
                  <option value="4ch">4chan</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 class="control">
          <div class="field">
            <input
              id="dedup_switch"
              type="checkbox"
              class="switch is-rounded is-info"
              name="dedup"
              {% if params.dedup == "on" %}
                checked="checked"
              {% endif %}>
            <label
              for="dedup_switch">
              Deduplicate results
            </label>
          </div>
        </div>
      </div>
      <div class="column is-narrow">
        <div id="sentiment">
          <div class="field has-addons">
            <div class="control">
              <input
                {% if params.check_sentiment != "on" %}
                  disabled="undefined"
                {% endif %}
                name="sentiment" id="sliderWithValue" class="slider has-output-tooltip is-fullwidth" min="-1" max="1"
                {% if params.sentiment == None %}
                  value="0"
                {% else %}
                  value="{{ params.sentiment }}"
                {% endif %}
                step="0.05" type="range">
              <output for="sliderWithValue" class="slider-output">
                {% if params.sentiment == None %}
                  0
                {% else %}
                  {{ params.sentiment }}
                {% endif %}
              </output>
              <script>bulmaSlider.attach();</script>
            </div>
            <p class="control">
              <a class="button is-static">
                sentiment
              </a>
            </p>
          </div>
          <div class="control">
            <label class="radio button has-text-link">
              <input
                type="radio"
                value="below"
                class="sentiment-radio"
                {% if params.sentiment_method == 'below' %}
                  checked
                {% endif %}
                name="sentiment_method"
                {% if params.check_sentiment != "on" %}
                  disabled
                {% endif %}>
              <span class="icon" data-tooltip="Below">
                <i class="fa-solid fa-face-frown"></i>
              </span>
            </label>
            <label class="radio button has-text-link is-hidden">
              <input
                type="radio"
                value="exact"
                class="sentiment-radio"
                {% if params.sentiment_method == 'exact' %}
                  checked
                {% endif %}
                name="sentiment_method"
                {% if params.check_sentiment != "on" %}
                  disabled
                {% endif %}>
              <span class="icon" data-tooltip="Exact">
                <i class="fa-solid fa-face-smile"></i>
              </span>
            </label>
            <label class="radio button has-text-link">
              <input
                type="radio"
                value="above"
                class="sentiment-radio"
                {% if params.sentiment_method == 'above' %}
                  checked
                {% endif %}
                name="sentiment_method"
                {% if params.check_sentiment != "on" %}
                  disabled
                {% endif %}>
              <span class="icon" data-tooltip="Above">
                <i class="fa-solid fa-face-smile"></i>
              </span>
            </label>
            <label class="radio button has-text-link">
              <input
                type="radio"
                value="nonzero"
                class="sentiment-radio"
                {% if params.sentiment_method == 'nonzero' %}
                  checked
                {% endif %}
                name="sentiment_method"
                {% if params.check_sentiment != "on" %}
                  disabled
                {% endif %}>
              <span class="icon" data-tooltip="Nonzero">
                <i class="fa-solid fa-face-meh-blank"></i>
              </span>
            </label>
          </div>

        </div>
        <div class="control">
          <div class="field">
            <input
              id="sentiment_switch"
              type="checkbox"
              class="switch is-rounded is-info"
              name="check_sentiment"
              data-script="on click toggle @disabled on #sliderWithValue then toggle @disabled on #sentiment then toggle @disabled on .sentiment-radio"
              {% if params.check_sentiment == "on" %}
                checked
              {% endif %}>
            <label
              for="sentiment_switch">
              Check sentiment
            </label>
          </div>
        </div>
        <div class="control">
          <div class="field">
            <input
              id="sentiment_graph_switch"
              type="checkbox"
              class="switch is-rounded is-info"
              name="show_sentiment"
              data-script="on click toggle .is-hidden on #sentiment-container">

            <label
              for="sentiment_graph_switch">
              Show graph
            </label>
          </div>
        </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>