<div class="compose-workspace-widget">
  <div class="mb-4">
    <p class="is-size-7 has-text-weight-semibold">Manual Workspace</p>
    <h3 class="title is-6 mb-2">Browse Message History</h3>
    <p class="is-size-7">
      Filter persisted messages across contacts, then reopen the matching live thread widget.
    </p>
  </div>

  <form id="{{ browser_form_id }}">
    {% if person_scope_id %}
      <input type="hidden" name="person" value="{{ person_scope_id }}">
    {% endif %}

    <div class="field">
      <label class="label is-small" for="{{ search_input_id }}">Find Messages</label>
      <div class="control has-icons-left">
        <input
          id="{{ search_input_id }}"
          class="input is-small"
          type="search"
          name="q"
          value="{{ search_query }}"
          placeholder="Person, identifier, or message text"
          hx-get="{{ results_url }}"
          hx-trigger="input changed delay:250ms, search"
          hx-target="#{{ results_id }}"
          hx-include="#{{ browser_form_id }}"
          hx-swap="outerHTML">
        <span class="icon is-small is-left"><i class="fa-solid fa-magnifying-glass"></i></span>
      </div>
    </div>

    <div class="columns is-mobile is-multiline mb-1">
      <div class="column is-half pt-0 pb-2">
        <label class="label is-small" for="{{ service_input_id }}">Service</label>
        <div class="select is-small is-fullwidth">
          <select
            id="{{ service_input_id }}"
            name="service"
            hx-get="{{ results_url }}"
            hx-trigger="change"
            hx-target="#{{ results_id }}"
            hx-include="#{{ browser_form_id }}"
            hx-swap="outerHTML">
            {% for value, label in service_options %}
              <option value="{{ value }}" {% if value == service %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-half pt-0 pb-2">
        <label class="label is-small" for="{{ direction_input_id }}">Direction</label>
        <div class="select is-small is-fullwidth">
          <select
            id="{{ direction_input_id }}"
            name="direction"
            hx-get="{{ results_url }}"
            hx-trigger="change"
            hx-target="#{{ results_id }}"
            hx-include="#{{ browser_form_id }}"
            hx-swap="outerHTML">
            {% for value, label in direction_options %}
              <option value="{{ value }}" {% if value == direction %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-half pt-0 pb-2">
        <label class="label is-small" for="{{ days_input_id }}">Range</label>
        <div class="select is-small is-fullwidth">
          <select
            id="{{ days_input_id }}"
            name="days"
            hx-get="{{ results_url }}"
            hx-trigger="change"
            hx-target="#{{ results_id }}"
            hx-include="#{{ browser_form_id }}"
            hx-swap="outerHTML">
            {% for value, label in days_options %}
              <option value="{{ value }}" {% if value == days %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="column is-half pt-0 pb-2">
        <label class="label is-small" for="{{ thread_limit_input_id }}">Thread Window</label>
        <div class="select is-small is-fullwidth">
          <select id="{{ thread_limit_input_id }}" name="limit">
            {% for option in thread_limit_options %}
              <option value="{{ option }}" {% if option == limit %}selected{% endif %}>
                {{ option }} messages
              </option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>

    {% if person_scope %}
      <p class="help mb-3">
        Scoped to <strong>{{ person_scope.name }}</strong>.
      </p>
    {% endif %}
  </form>

  {% include "partials/compose-workspace-history-results.html" %}
</div>
