{% extends "base.html" %}
{% from "macros.html" import icon, btn, badge %}
{% block title %}{{ t('Search') }}{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">{{ t('Search') }}</h1>
    <p class="page-subtitle">{{ t('Global semantic & keyword search') }}</p>
  </div>
</div>

<div class="card" style="overflow:hidden">
  <div style="padding:24px;border-bottom:1px solid var(--border); background: var(--surface-2)">
    <div class="search-wrap" style="max-width:800px; margin: 0 auto">
      {{ icon('search', 16) }}
      <input type="search"
             id="search-page-input"
             name="q"
             value="{{ q | default('') }}"
             placeholder="{{ t('Search across all models…') }}"
             autofocus
             autocomplete="off"
             data-block="#search_results"
             data-url="{{ admin_prefix }}/search"
             data-trigger="input delay:350ms"
             style="height:46px; font-size:1rem; border-radius: var(--r-lg)">
    </div>
  </div>

  <div id="search_results" style="padding:32px">
    {% block search_results %}
    {% if groups %}
      <div style="display:flex; flex-direction:column; gap:32px">
      {% for group in groups %}
        <div class="search-results-group">
          <div class="search-group-title" style="margin-bottom:12px; display:flex; align-items:center; gap:8px">
            {{ icon('table', 14) }} {{ group.label }}
            <span class="muted" style="font-weight:400; text-transform:none; margin-left:auto">{{ group.hits | length }} {{ t('hits') }}</span>
          </div>
          <div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:12px">
            {% for hit in group.hits %}
              <a href="{{ admin_prefix }}/{{ group.slug }}/{{ hit.id }}"
                 class="card" style="display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r); color:var(--fg); text-decoration:none; transition:all var(--trans)"
                 data-spa>
                <div style="width:32px; height:32px; border-radius:var(--r); background:var(--brand-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0">
                  {{ icon('arrow-right', 14) }}
                </div>
                <div style="flex:1; min-width:0">
                  <div style="font-weight:600; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis">{{ hit.label }}</div>
                  <div class="muted" style="font-size:0.75rem">#{{ hit.id }}</div>
                </div>
              </a>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
      </div>
    {% elif q %}
      <div class="empty-state">
        <div style="width:64px; height:64px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px">
          {{ icon('search', 24, 'empty-icon') }}
        </div>
        <p class="empty-title">{{ t('No results found') }}</p>
        <p class="empty-text">{{ t('We couldn\'t find any records matching your query. Try different keywords or check spelling.') }}</p>
      </div>
    {% else %}
      <div class="empty-state" style="padding:64px">
        <div style="width:64px; height:64px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px">
          {{ icon('search', 24, 'empty-icon') }}
        </div>
        <p class="empty-title">{{ t('Ready to search?') }}</p>
        <p class="empty-text">{{ t('Start typing to perform a global search across all your data models.') }}</p>
      </div>
    {% endif %}
    {% endblock %}
  </div>
</div>
{% endblock %}