{% extends "admin/_layout.html" %}
{% from "_macros.html" import icon %}
{% set section = "search" %}

{% block title %}Web search - LLeMbas{% endblock %}
{% block heading %}Web search{% endblock %}

{% block admin_content %}
<p class="admin-lede">
  Lets a model look things up while it answers. It is offered as a tool the
  model chooses to call, so nothing changes for a question that does not need
  it — and it is only offered to models marked as supporting tools, because
  sending a tool list to one that does not fails the whole request.
</p>

{% if saved %}
<div class="alert alert--success">{{ icon("check", "icon--sm") }} <span>Search settings saved.</span></div>
{% endif %}

<form method="post" action="/admin/search">
  <section class="card">
    <h2 class="card__title">
      Web search
      {% if values.enabled %}<span class="badge badge--success">on</span>
      {% else %}<span class="badge">off</span>{% endif %}
    </h2>
    <div class="field">
      <label class="checkbox">
        <input type="checkbox" name="enabled" value="true" {{ 'checked' if values.enabled }}>
        <span>Offer web search to models that support tools</span>
      </label>
      <p class="field__hint">
        Who may use it is a permission — <code>tools.web_search</code> under
        Groups &amp; permissions.
      </p>
    </div>
  </section>

  <section class="card">
    <h2 class="card__title">Provider</h2>
    <div class="field">
      {% for provider in providers %}
      <label class="checkbox" style="align-items: flex-start">
        <input type="radio" name="provider" value="{{ provider.key }}"
               {{ 'checked' if values.provider == provider.key }}>
        <span>
          <strong>{{ provider.label }}</strong>
          {% if not provider.needs_setup %}<span class="badge">no setup</span>{% endif %}
          <div class="text-xs faint">{{ provider.description }}</div>
          {% if problems[provider.key] %}
          <div class="text-xs" style="color: var(--danger)">{{ problems[provider.key] }}</div>
          {% endif %}
        </span>
      </label>
      {% endfor %}
    </div>

    <div class="grid grid--3">
      <div class="field">
        <label class="field__label" for="max-results">Results per search</label>
        <input class="input" id="max-results" name="max_results" type="number"
               min="1" max="20" value="{{ values.max_results }}">
        <p class="field__hint">A ceiling — a model asking for more gets this.</p>
      </div>
      <div class="field">
        <label class="field__label" for="safesearch">Safe search</label>
        <select class="select" id="safesearch" name="safesearch">
          {% for option in safesearch_options %}
          <option value="{{ option }}" {{ 'selected' if option == values.safesearch }}>
            {{ option }}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="field">
        <label class="field__label" for="timeout">Timeout (seconds)</label>
        <input class="input" id="timeout" name="timeout" type="number"
               min="5" max="120" step="1" value="{{ values.timeout }}">
      </div>
    </div>

    <div class="field">
      <label class="field__label" for="region">DuckDuckGo region</label>
      <input class="input" id="region" name="region" maxlength="16"
             value="{{ values.region }}" placeholder="wt-wt">
      <p class="field__hint">
        <code>wt-wt</code> is no region at all. <code>uk-en</code>,
        <code>de-de</code> and so on bias results to a country.
      </p>
    </div>
  </section>

  <section class="card">
    <h2 class="card__title">SearXNG</h2>
    <p class="card__lede">
      Only used when SearXNG is the chosen provider. Your own instance, so no
      third party sees the queries.
    </p>
    <div class="field">
      <label class="field__label" for="searxng-base-url">Instance URL</label>
      <input class="input" id="searxng-base-url" name="searxng_base_url" type="url"
             value="{{ values.searxng_base_url }}" placeholder="http://127.0.0.1:8888">
      <p class="field__hint">
        A stock SearXNG refuses JSON. Add <code>- json</code> under
        <code>search.formats</code> in its <code>settings.yml</code> and restart
        it, or every search will fail with that message.
      </p>
    </div>
  </section>

  <section class="card">
    <h2 class="card__title">Firecrawl</h2>
    <div class="grid grid--2">
      <div class="field">
        <label class="field__label" for="firecrawl-base-url">API URL</label>
        <input class="input" id="firecrawl-base-url" name="firecrawl_base_url" type="url"
               value="{{ values.firecrawl_base_url }}"
               placeholder="https://api.firecrawl.dev">
        <p class="field__hint">Change only for a self-hosted Firecrawl.</p>
      </div>
      <div class="field">
        <label class="field__label" for="firecrawl-api-key">API key</label>
        <input class="input" id="firecrawl-api-key" name="firecrawl_api_key" type="password"
               value="{{ unchanged if masked else '' }}"
               placeholder="{{ masked or 'fc-...' }}" autocomplete="off">
        <p class="field__hint">Encrypted at rest. Clear the field to remove it.</p>
      </div>
    </div>
  </section>

  <div class="btn-row"><button class="btn btn--primary" type="submit">Save settings</button></div>
</form>

<section class="card">
  <h2 class="card__title">Try it</h2>
  <p class="card__lede">
    Runs a real search against the <em>saved</em> settings, which is what a chat
    would do. Save first if you have just changed something.
  </p>
  <div class="row" style="gap: var(--sp-2)">
    <input class="input" id="test-query" name="query" placeholder="mallorn tree"
           style="flex: 1">
    <button class="btn" type="button" hx-post="/admin/search/test"
            hx-include="#test-query" hx-target="#search-test" hx-swap="outerHTML">
      {{ icon("search", "icon--sm") }} Search
    </button>
  </div>
  <div id="search-test"></div>
</section>
{% endblock %}