{% extends "layout.html" %}
{% block content %}
<div class="card shadow-sm mb-3">
  <div class="card-body">
    <h1 class="h4 mb-3">Search</h1>

    <form method="post" action="/search" class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label">Mode</label>
        <select class="form-select" name="mode" required>
          <option value="relevance">Context relevance (FTS BM25)</option>
          <option value="exact_phrase">Exact phrase (FTS)</option>
          <option value="exact_substring">Exact substring (LIKE)</option>
          <option value="regex">Regex (REGEXP)</option>
          <option value="fuzzy">Fuzzy (rapidfuzz)</option>
        </select>
      </div>

      <div class="col-md-6">
        <label class="form-label">Query</label>
        <input class="form-control" name="query" placeholder="Search..." required>
      </div>

      <div class="col-md-3">
        <button class="btn btn-primary w-100">Search</button>
      </div>

      <div class="col-md-3">
        <label class="form-label">Address</label>
        <input class="form-control" name="address" placeholder="optional">
      </div>
      <div class="col-md-2">
        <label class="form-label">Type</label>
        <select class="form-select" name="msg_type">
          <option value="">any</option>
          <option value="1">received</option>
          <option value="2">sent</option>
        </select>
      </div>
      <div class="col-md-2">
        <label class="form-label">Thread ID</label>
        <input class="form-control" name="thread_id" placeholder="optional">
      </div>
      <div class="col-md-2">
        <label class="form-label">Date from (ms)</label>
        <input class="form-control" name="date_from_ms" placeholder="optional">
      </div>
      <div class="col-md-2">
        <label class="form-label">Date to (ms)</label>
        <input class="form-control" name="date_to_ms" placeholder="optional">
      </div>
    </form>
  </div>
</div>

<div class="d-flex justify-content-between align-items-center mb-2">
  <div class="text-muted small">Showing up to 200 results</div>
</div>

{% for r in results %}
<div class="card mb-2">
  <div class="card-body">
    <div class="d-flex justify-content-between">
      <div class="small text-muted">
        #{{r["id"]}} · {{r["address"]}} · {{r["date_ms"]}} · type {{r["type"]}} · thread {{r["thread_id"]}}
      </div>
      <form method="post" action="/bookmark" class="d-flex gap-2">
        <input type="hidden" name="message_id" value="{{r['id']}}">
        <input class="form-control form-control-sm" name="note" placeholder="note (optional)">
        <button class="btn btn-sm btn-outline-primary">Bookmark</button>
      </form>
    </div>
    <div class="mt-2">{{r["body"]}}</div>
  </div>
</div>
{% endfor %}
{% endblock %}