{% extends 'panel/base.html' %}

{% block panel_title %}Wyniki wyszukiwania{% endblock %}
{% block heading %}Wyniki wyszukiwania{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    {% if query %}
      Pytanie: <span class="font-medium text-slate-700 dark:text-slate-200">{{ query }}</span>
      &middot; znaleziono {{ results|length }}{% if results|length == limit %}+{% endif %}
    {% else %}
      Wpisz nazwę ustawienia albo zakładki - wyszukiwarka przegląda cały panel.
    {% endif %}
  </p>
{% endblock %}

{% block content %}
<div class="max-w-3xl space-y-4">
  {% if not query %}
    <div class="card">
      <div class="card-body space-y-2">
        <p class="text-sm text-slate-600 dark:text-slate-300">
          Wyszukiwarka zna każda zakładkę panelu i każde pojedyncze ustawienie w niej.
          Wynik prowadzi wprost do pola - zakładka otwiera się z podswietlonym ustawieniem.
        </p>
        <p class="help">Pole wyszukiwania stoi w nagłówku każdej strony panelu (skrót: Ctrl+K).</p>
      </div>
    </div>
  {% elif not results %}
    <div class="card">
      <div class="card-body space-y-2">
        <p class="text-sm text-slate-700 dark:text-slate-200">Nic nie pasuje do pytania &bdquo;{{ query }}&rdquo;.</p>
        <p class="help">Spróbuj krótszej frazy albo samego słowa kluczowego - np. &bdquo;kolor&rdquo;, &bdquo;kopie&rdquo;, &bdquo;SMTP&rdquo;.</p>
      </div>
    </div>
  {% else %}
    <div class="card divide-y divide-slate-200 dark:divide-slate-800">
      {% for result in results %}
        <a href="{{ result.url }}" class="tile-hover flex items-start gap-3 p-4">
          <span class="mt-0.5 shrink-0 text-slate-400">{% include 'partials/icon.html' with icon=result.icon %}</span>
          <span class="min-w-0 flex-1">
            <span class="flex flex-wrap items-center gap-2">
              <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ result.title }}</span>
              <span class="badge {% if result.is_field %}bg-brand-600/10 text-brand-700 dark:text-brand-300{% else %}bg-slate-200 text-slate-600 dark:bg-slate-800 dark:text-slate-300{% endif %}">
                {% if result.is_field %}ustawienie{% else %}zakładka{% endif %}
              </span>
            </span>
            {% if result.path %}
              <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">
                {% for step in result.path %}{% if not forloop.first %} &rsaquo; {% endif %}{{ step }}{% endfor %}
              </span>
            {% endif %}
            {% if result.description %}
              <span class="mt-1 block text-sm text-slate-600 dark:text-slate-300">{{ result.description }}</span>
            {% endif %}
          </span>
        </a>
      {% endfor %}
    </div>
  {% endif %}
</div>
{% endblock %}