<form
  class="osint-search-form box"
  method="get"
  action="{{ osint_search_url }}"
  hx-get="{{ osint_search_url }}"
  hx-trigger="change delay:120ms"
  hx-target="#osint-search-results"
  hx-swap="innerHTML">
  <div class="columns is-multiline">
    <div class="column is-4">
      <label class="label">Scope</label>
      <div class="select">
        <select name="scope">
          {% for option in scope_options %}
            <option
              value="{{ option.value }}"
              {% if option.value == selected_scope %}selected{% endif %}>
              {{ option.label }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="column is-4">
      <label class="label">Field</label>
      <div class="select">
        <select name="field">
          <option value="__all__" {% if selected_field == "__all__" %}selected{% endif %}>
            All Fields
          </option>
          {% for option in field_options %}
            <option
              value="{{ option.value }}"
              {% if option.value == selected_field %}selected{% endif %}>
              {{ option.label }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="column is-4">
      <label class="label">Rows Per Page</label>
      <div class="select">
        <select name="per_page">
          <option value="10" {% if selected_per_page == 10 %}selected{% endif %}>10</option>
          <option value="20" {% if selected_per_page == 20 %}selected{% endif %}>20</option>
          <option value="50" {% if selected_per_page == 50 %}selected{% endif %}>50</option>
          <option value="100" {% if selected_per_page == 100 %}selected{% endif %}>100</option>
        </select>
      </div>
    </div>
    <div class="column is-9">
      <label class="label">Search Query</label>
      <input
        class="input"
        type="text"
        name="q"
        hx-get="{{ osint_search_url }}"
        hx-trigger="keyup changed delay:220ms"
        hx-include="closest form"
        hx-target="#osint-search-results"
        hx-swap="innerHTML"
        value="{{ search_query }}"
        placeholder="Search contacts, identifiers, and messages...">
    </div>
    <div class="column is-3">
      <label class="label">&nbsp;</label>
      <div class="buttons">
        <button class="button is-link is-light is-fullwidth" type="submit">
          Search
        </button>
        <a class="button is-light is-fullwidth" href="{{ osint_search_url }}" style="margin-bottom: 0.55rem;">
          Reset
        </a>
      </div>
    </div>
  </div>
  <details style="margin-top: 0.45rem;">
    <summary class="has-text-weight-semibold">Advanced Filters (SIQTSRSS/ADR)</summary>
    <p class="help" style="margin: 0.1rem 0 0.2rem 0;">Tip: use inline tags like <code>tag:messages</code> or <code>tag:people</code> in the query to narrow All-scope results quickly.</p>
    <p class="help" style="margin: 0 0 0.35rem 0;"><strong>Source Service</strong>, <strong>From Date</strong>, <strong>To Date</strong>, and <strong>Sort Mode</strong> shape which results you see and in what order.</p>
    <div style="margin-top: 0.2rem;">
      <div class="columns is-multiline" style="margin-top: 0.3rem;">
        <div class="column is-12-mobile is-6-tablet is-4-desktop">
          <label class="label">Source Service</label>
          <div class="select">
            <select name="source">
              <option value="all" {% if selected_source == "all" %}selected{% endif %}>All</option>
              <option value="web" {% if selected_source == "web" %}selected{% endif %}>Web</option>
              <option value="xmpp" {% if selected_source == "xmpp" %}selected{% endif %}>XMPP</option>
              <option value="signal" {% if selected_source == "signal" %}selected{% endif %}>Signal</option>
              <option value="whatsapp" {% if selected_source == "whatsapp" %}selected{% endif %}>WhatsApp</option>
            </select>
          </div>
        </div>

        <div class="column is-12"></div>

        <div class="column is-12-mobile is-6-tablet is-3-desktop">
          <label class="label">From Date</label>
          <input
            class="input{% if selected_date_from %} date-has-value{% endif %}"
            type="date"
            name="date_from"
            value="{{ selected_date_from }}"
            aria-label="From date">
        </div>
        <div class="column is-12-mobile is-6-tablet is-3-desktop">
          <label class="label">To Date</label>
          <input
            class="input{% if selected_date_to %} date-has-value{% endif %}"
            type="date"
            name="date_to"
            value="{{ selected_date_to }}"
            aria-label="To date">
        </div>
        <div class="column is-12-mobile is-6-tablet is-3-desktop">
          <label class="label">Sort Mode</label>
          <div class="select">
            <select name="sort_mode">
              <option value="relevance" {% if selected_sort_mode == "relevance" %}selected{% endif %}>Relevance</option>
              <option value="recent" {% if selected_sort_mode == "recent" %}selected{% endif %}>Recent First</option>
              <option value="oldest" {% if selected_sort_mode == "oldest" %}selected{% endif %}>Oldest First</option>
            </select>
          </div>
        </div>

        <div class="column is-12"></div>

        <div class="column is-12-mobile is-6-tablet is-2-desktop">
          <label class="label">Min Sent.</label>
          <input class="input" type="number" step="0.01" min="-1" max="1" name="sentiment_min" value="{{ selected_sentiment_min }}">
        </div>
        <div class="column is-12-mobile is-6-tablet is-2-desktop">
          <label class="label">Max Sent.</label>
          <input class="input" type="number" step="0.01" min="-1" max="1" name="sentiment_max" value="{{ selected_sentiment_max }}">
        </div>

        <div class="column is-12"></div>

        <div class="column is-12">
          <label class="checkbox" style="margin-right: 0.9rem;">
            <input type="checkbox" name="annotate" value="1" {% if selected_annotate %}checked{% endif %}>
            Annotate snippets
          </label>
          <label class="checkbox" style="margin-right: 0.9rem;">
            <input type="checkbox" name="dedup" value="1" {% if selected_dedup %}checked{% endif %}>
            Deduplicate
          </label>
          <label class="checkbox">
            <input type="checkbox" name="reverse" value="1" {% if selected_reverse %}checked{% endif %}>
            Reverse output
          </label>
        </div>
      </div>
      <div class="content is-size-7" style="margin-top: 0.2rem;">
        <ul>
          <li><strong>Min/Max Sent.</strong>: sentiment bounds for people/contact results (-1 to 1).</li>
          <li><strong>Annotate snippets</strong>: shows contextual snippets around query hits.</li>
          <li><strong>Deduplicate</strong>: removes near-identical repeated rows.</li>
          <li><strong>Reverse output</strong>: reverses final result order after sorting.</li>
        </ul>
      </div>
    </div>
  </details>
</form>

<div id="osint-search-results">
  {% include "partials/results_table.html" %}
</div>

<style>
  .date-has-value::-webkit-calendar-picker-indicator {
    filter: brightness(0) saturate(100%) invert(38%) sepia(85%) saturate(1820%) hue-rotate(201deg) brightness(96%) contrast(92%);
  }
</style>
