{% extends 'public/base.html' %}
{% load i18n %}

{% block content %}

{% comment %}Ciemny nagłówek z polem szukania - pole stoi w nim jako jasny
   prostokąt, więc od razu widać, gdzie się pisze.{% endcomment %}
<section class="band-ink">
  {% include 'public/partials/deco.html' with slot='search' %}

  <div class="wrap py-14 sm:py-20">
    <span class="rule-alt relative overflow-hidden" aria-hidden="true">
      {% include 'public/partials/deco.html' with slot='search-rule' %}
    </span>
    <p class="eyebrow-alt">{{ site_settings.site_name }}</p>
    <h1 class="title-hero mt-4">{{ search.search_heading }}</h1>

    <form action="{% url 'core:search' %}" method="get" role="search" class="mt-8 flex max-w-2xl items-stretch">
      <label class="sr-only" for="search-query">{{ search.search_heading }}</label>
      <input id="search-query" type="search" name="q" value="{{ query }}" placeholder="{{ search.search_placeholder }}"
             class="site-input border-r-0 border-transparent py-3">
      <button type="submit" class="shrink-0 bg-brand-600 px-7 text-sm font-semibold uppercase tracking-[0.14em] text-white hover:bg-white hover:text-slate-900">{{ search.search_button_label }}</button>
    </form>
  </div>
</section>

<section class="band">
  <div class="wrap">
  {% if too_short %}
    <p class="lead">Wpisz co najmniej {{ search.search_min_chars }} znak&oacute;w.</p>
  {% elif query %}
    <p class="eyebrow">{% blocktrans with ile=total nazwa=total_label fraza=query %}{{ ile }} {{ nazwa }} dla &bdquo;{{ fraza }}&rdquo;{% endblocktrans %}</p>

    {% comment %}Wyniki stoją przy sobie, rozdzielone włosowa linia. Najechanie
       maluje lewa krawędź kolorem wiodącym i przesuwa wiersz.{% endcomment %}
    <ul class="mt-8 divide-y divide-site-border border-y border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
      {% for result in results %}
        <li>
          <a href="{{ result.url }}" class="tile-hover group block px-5 py-7">
            {% if search.search_show_kind %}
              <p class="eyebrow">{{ result.kind }}</p>
            {% endif %}
            <p class="mt-2 text-xl font-bold tracking-tight group-hover:text-brand-600 dark:group-hover:text-brand-400">{{ result.title }}</p>
            {% if result.excerpt %}
              <p class="mt-2 max-w-3xl text-sm leading-relaxed text-site-muted dark:text-site-muted-dark">{{ result.excerpt }}</p>
            {% endif %}
          </a>
        </li>
      {% empty %}
        <li class="px-5 py-16 text-center text-sm text-site-muted dark:text-site-muted-dark">
          {{ search.search_empty_text }}
        </li>
      {% endfor %}
    </ul>

    {% if page_obj.has_other_pages %}
      <nav class="mt-10 flex items-center justify-between">
        {% if page_obj.has_previous %}
          <a href="?q={{ query|urlencode }}&amp;page={{ page_obj.previous_page_number }}" class="btn-ghost">&larr; {% trans "Poprzednia" %}</a>
        {% else %}<span></span>{% endif %}
        <span class="text-xs uppercase tracking-[0.14em] text-site-muted dark:text-site-muted-dark">{% blocktrans with numer=page_obj.number ile=page_obj.paginator.num_pages %}Strona {{ numer }} z {{ ile }}{% endblocktrans %}</span>
        {% if page_obj.has_next %}
          <a href="?q={{ query|urlencode }}&amp;page={{ page_obj.next_page_number }}" class="btn-ghost">{% trans "Następna" %} &rarr;</a>
        {% else %}<span></span>{% endif %}
      </nav>
    {% endif %}
  {% endif %}
  </div>
</section>
{% endblock %}