{% extends "base.html" %}
{% block content %}
{# Search UI page. Expects: project, project_enc, project_url, search_api_url. #}

<h1 class="page-title d-flex align-items-center gap-2">
  <a href="{{ project_url }}" class="text-reset">{{ project }}</a>
  <span class="text-muted">/</span>
  <span>search</span>
</h1>

<div class="card mb-3">
  <div class="card-body">
    <form id="search-form" class="search-container" autocomplete="off" onsubmit="return false;">
      <input
        id="search-patterns"
        class="form-control search"
        type="text"
        spellcheck="false"
        autocomplete="off"
        placeholder="Search regex (e.g. TODO|FIXME)..."
        aria-label="Search pattern"
      >

      <details id="search-advanced" class="mt-2">
        <summary>Advanced options</summary>
        <div class="row g-2 mt-1">
          <div class="col-md-6">
            <label class="form-label" for="search-paths">Paths (relative, comma separated)</label>
            <input id="search-paths" class="form-control" type="text" placeholder="src,docs">
            <div class="form-hint">Restricted to the project tree.</div>
          </div>
          <div class="col-md-6">
            <label class="form-label" for="search-globs">Globs (comma separated)</label>
            <input id="search-globs" class="form-control" type="text" placeholder="*.py,*.md,!**/vendor/**">
          </div>
          <div class="col-md-3">
            <label class="form-label" for="search-sort">Sort</label>
            <select id="search-sort" class="form-select">
              <option value="">(none)</option>
              <option value="Path">Path</option>
              <option value="-Path">Path (reverse)</option>
              <option value="LastModified">Last modified</option>
              <option value="-LastModified">Last modified (reverse)</option>
              <option value="LastAccessed">Last accessed</option>
              <option value="-LastAccessed">Last accessed (reverse)</option>
              <option value="Created">Created</option>
              <option value="-Created">Created (reverse)</option>
            </select>
          </div>
          <div class="col-md-3">
            <label class="form-label" for="search-max-count">Max matches per file</label>
            <input id="search-max-count" class="form-control" type="number" min="1" value="25">
          </div>
          <div class="col-md-3 align-self-end">
            <label class="form-check">
              <input id="search-heading" class="form-check-input" type="checkbox" checked>
              <span class="form-check-label">Heading (group by file)</span>
            </label>
          </div>
          <div class="col-md-3 align-self-end">
            <label class="form-check">
              <input id="search-multiline" class="form-check-input" type="checkbox">
              <span class="form-check-label">Multiline</span>
            </label>
          </div>
        </div>
      </details>
    </form>
  </div>
</div>

<div id="search-status" class="search-status text-muted mb-2" aria-live="polite"></div>
<div id="search-results" class="search-results" role="region" aria-label="Search results"></div>
{% endblock %}
{% block scripts %}
<script>
  window.SEARCH_PROJECT = {{ project | tojson }};
  window.SEARCH_API_URL = {{ search_api_url | tojson }};
</script>
<script type="module" src="/static/search-page.js"></script>
{% endblock %}