{# ── HTMX partial: search results ──
   Swapped into #search-results when the search query changes.
   Variables: q, items, next_cursor, project_key, project,
              kind_color(), kind_label(), status_color(), status_label()
#}

{% if not q %}
  {# ── Empty query hint ── #}
  <div class="flex flex-col items-center gap-3 py-16">
    <svg class="w-12 h-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round"
            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/>
    </svg>
    <p class="text-sm text-gray-400 dark:text-gray-500">{{ t("search.no_query") }}</p>
  </div>

{% elif not items %}
  {# ── No results ── #}
  <div class="flex flex-col items-center gap-3 py-16">
    <svg class="w-12 h-12 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
      <path stroke-linecap="round" stroke-linejoin="round"
            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"/>
    </svg>
    <p class="text-sm text-gray-500 dark:text-gray-400">
      {{ t("search.no_results_prefix") }} "<span class="font-medium text-gray-700 dark:text-gray-300">{{ q }}</span>" {{ t("search.no_results_suffix") }}
    </p>
  </div>

{% else %}
  {# ── Result cards ── #}
  <div class="space-y-3">
    {% for item in items %}
      {% set kc = kind_color(item.kind) %}
      {% set sc = status_color(item.status) %}

      <div class="group rounded-lg border border-gray-200 dark:border-gray-800
                  bg-white dark:bg-gray-900 shadow-sm
                  hover:shadow-md hover:border-gray-300 dark:hover:border-gray-700
                  transition-all">
        <div class="p-4 space-y-2.5">
          {# Top row: kind badge + local_id #}
          <div class="flex items-center gap-2">
            <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide
                         {{ kc.bg }} {{ kc.text }}">
              {{ kind_label(item.kind, project) }}
            </span>
            <span class="text-xs font-mono text-gray-400 dark:text-gray-500">
              {{ item.local_id }}
            </span>
          </div>

          {# Title (clickable link to item detail) #}
          <a href="/dashboard/{{ project_key }}/items/{{ item.local_id }}"
             class="block text-sm font-medium text-gray-900 dark:text-gray-100
                    hover:text-primary-600 dark:hover:text-primary-400
                    transition-colors line-clamp-2">
            {{ item.title }}
          </a>

          {# Body preview #}
          {% if item.body_preview %}
            <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-3 leading-relaxed">
              {{ item.body_preview[:200] }}
            </p>
          {% endif %}

          {# Bottom row: status badge + tags + updated time #}
          <div class="flex items-center justify-between gap-3 pt-1">
            <div class="flex flex-wrap items-center gap-1.5">
              {# Status badge #}
              <span class="inline-flex items-center gap-1.5 px-1.5 py-0.5 rounded text-[10px] font-medium
                           {{ sc.bg }} {{ sc.text }}">
                <span class="w-1.5 h-1.5 rounded-full {{ sc.dot }}"></span>
                {{ status_label(item.status, project) }}
              </span>

              {# Tags #}
              {% for tag in item.tags %}
                <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium
                             bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400">
                  {{ tag }}
                </span>
              {% endfor %}
            </div>

            {# Updated time #}
            <span class="text-[10px] text-gray-400 dark:text-gray-500 whitespace-nowrap flex-shrink-0">
              {{ item.updated_at[:16] | replace('T', ' ') }}
            </span>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  {# ── Pagination: load more ── #}
  {% if next_cursor %}
    <div class="flex justify-center pt-4">
      <button hx-get="/dashboard/{{ project_key }}/search?q={{ q | urlencode }}&after={{ next_cursor }}&partial=true"
              hx-target="#search-results"
              hx-swap="innerHTML"
              class="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium
                     text-primary-600 dark:text-primary-400
                     bg-primary-50 dark:bg-primary-900/20
                     hover:bg-primary-100 dark:hover:bg-primary-900/30
                     transition-colors">
        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
        </svg>
        {{ t("common.load_more") }}
      </button>
    </div>
  {% endif %}
{% endif %}