{{template "head" .View}}
{{template "header" .View}}
<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View "pages.search.title" "pages.search.description" "/static/images/pages/directory.jpg")}}

  <div class="page-container py-8 pb-16">
    <form action="/search" method="get" class="toolbar-panel flex flex-col gap-2 sm:flex-row" role="search">
      <div class="relative flex-1">
        <svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        <input type="search" name="q" value="{{.Query}}" class="input-field pl-10" placeholder="{{t .View "search.placeholder"}}" autofocus />
      </div>
      <button type="submit" class="btn-primary shrink-0">{{t .View "search.submit"}}</button>
    </form>

    {{if not .HasQuery}}
    <p class="mt-6 text-sm text-slate-500 dark:text-slate-400">{{t .View "search.prompt"}}</p>
    <p class="mt-4 flex flex-wrap items-center gap-2 text-sm text-slate-600 dark:text-slate-400">
      <span>{{t .View "home.searchPopular"}}</span>
      {{range searchHints .View}}<a href="/search?q={{.Query | urlquery}}" class="chip">{{.Label}}</a>{{end}}
    </p>
    {{else if eq .Total 0}}
    <div class="mt-10 rounded-2xl border border-slate-200 bg-white p-8 text-center dark:border-slate-800 dark:bg-slate-900">
      <h2 class="font-display text-xl font-bold text-slate-900 dark:text-white">{{t .View "search.noResultsTitle"}}</h2>
      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">{{t .View "search.noResultsBody"}}</p>
      <div class="mt-6 flex flex-wrap justify-center gap-3">
        <a href="/flights" class="btn-secondary">{{t .View "nav.flights"}}</a>
        <a href="/directory" class="btn-secondary">{{t .View "nav.directory"}}</a>
        <a href="/services" class="btn-secondary">{{t .View "nav.services"}}</a>
        <a href="/faq" class="btn-secondary">{{t .View "nav.faq"}}</a>
      </div>
    </div>
    {{else}}
    <p class="mt-4 text-sm text-slate-500 dark:text-slate-400">{{.Summary}}</p>

    <div class="mt-8 space-y-10">
      {{range .Groups}}
      <section class="reveal">
        <h2 class="font-display text-lg font-bold text-slate-900 dark:text-white">{{.Label}}</h2>
        <ul class="mt-4 divide-y divide-slate-100 overflow-hidden rounded-2xl border border-slate-200 bg-white dark:divide-slate-800 dark:border-slate-800 dark:bg-slate-900">
          {{range .Results}}
          <li>
            <a href="{{.URL}}" class="block px-5 py-4 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800/60">
              <span class="font-display font-semibold text-slate-900 dark:text-white">{{.Title}}</span>
              {{if .Description}}
              <p class="mt-1 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{.Description}}</p>
              {{end}}
            </a>
          </li>
          {{end}}
        </ul>
      </section>
      {{end}}
    </div>
    {{end}}
  </div>
</main>
{{template "footer" .View}}
{{template "scripts" .View}}