{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Search{% endblock %}
{% block page_title %}Search{% endblock %}
{% block page_subtitle %}Full-text search across all indexed objects (Extension A6){% endblock %}
{% block layer_indicator %}A6 Search{% endblock %}

{% block content %}
{# Search Bar #}
<div class="mb-6">
  <form method="get" action="{% url 'search' %}" class="flex gap-3">
    <div class="flex-1 relative">
      <input
        type="text"
        name="q"
        value="{{ query }}"
        placeholder="Search services, objects, and more..."
        class="w-full px-4 py-2.5 rounded-lg border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 placeholder-slate-400"
        autofocus
      >
    </div>
    <button type="submit" class="px-5 py-2.5 bg-brand-600 text-white text-sm font-medium rounded-lg hover:bg-brand-700 transition-colors">
      Search
    </button>
  </form>
</div>

{# Results #}
{% if query %}
<div class="mb-4">
  <span class="text-sm text-slate-500">
    {{ results|length }} result{{ results|length|pluralize }} for
    <strong class="text-slate-700">"{{ query }}"</strong>
  </span>
</div>

{% if results %}
<div class="space-y-3">
  {% for hit in results %}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4 hover:border-brand-300 transition-colors">
    <div class="flex items-start justify-between">
      <div class="flex-1">
        <div class="flex items-center gap-2 mb-1">
          <a href="{% url 'services_detail' hit.object_id %}" class="text-sm font-medium text-brand-600 hover:text-brand-800">
            {{ hit.name|default:"Untitled" }}
          </a>
          <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-50 text-slate-600 ring-1 ring-slate-500/20">
            {{ hit.object_type|default:"object" }}
          </span>
        </div>
        {% if hit.description %}
        <p class="text-sm text-slate-500 mt-1">{{ hit.description|truncatewords:25 }}</p>
        {% endif %}
        <div class="flex items-center gap-3 mt-2 text-xs text-slate-400">
          <span class="font-mono">{{ hit.object_id|truncate_id }}</span>
          {% if hit.owner_id %}
          <span>Owner: {{ hit.owner_id|truncate_id }}</span>
          {% endif %}
        </div>
      </div>
      {% if hit.score %}
      <div class="ml-4 text-right">
        <span class="text-xs text-slate-400">Score</span>
        <p class="text-sm font-mono text-slate-600">{{ hit.score }}</p>
      </div>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
{% include "components/_empty_state.html" with title="No results" message="No objects matched your search. Try different keywords or check that objects have been indexed." %}
{% endif %}

{% else %}
<div class="text-center py-16">
  <div class="text-4xl mb-3 text-slate-300">&#128269;</div>
  <h3 class="text-sm font-medium text-slate-900">Search your platform</h3>
  <p class="text-sm text-slate-500 mt-1">Enter a query above to find services, objects, and other indexed resources.</p>
</div>
{% endif %}
{% endblock %}