{{ define "main" }}
{{- $search := .Site.Params.search -}}
{{- $meili := $search.meilisearch -}}
{{- $apiKey := getenv "MEILI_SEARCH_API_KEY" -}}
{{- if eq $apiKey "" -}}
  {{- errorf "MEILI_SEARCH_API_KEY is required to render the search page" -}}
{{- end -}}
<header class="article-header">
  {{ partialCached "header-brand.html" .Site .Site.Title (.Site.Params.logo | default "logo-large.png") }}
  <h1>{{ .Title }}</h1>
</header>
<main
  class="search-page"
  data-search-endpoint="{{ $meili.endpoint }}"
  data-search-index="{{ $meili.indexUid }}"
  data-search-api-key="{{ $apiKey }}"
  data-search-limit="{{ $meili.hitsPerPage }}"
  data-search-param="{{ $search.param }}"
>
  <section class="listing-search">
    <p class="search-page-status" data-search-status aria-live="polite"></p>
  </section>

  <section class="listing-articles" data-search-listing hidden>
    <header>
      <h2>Résultats</h2>
    </header>
    <nav class="search-results" aria-label="Résultats de recherche">
      <ol data-search-results></ol>
    </nav>
  </section>

  <noscript>
    <section class="listing-articles">
      <p>Cette page nécessite JavaScript pour afficher les résultats.</p>
    </section>
  </noscript>
</main>

{{- $searchJS := resources.Get "js/search-page.js" -}}
{{- if eq hugo.Environment "development" -}}
<script src="{{ $searchJS.RelPermalink }}" defer></script>
{{- else -}}
{{- with $searchJS | minify | fingerprint -}}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" defer></script>
{{- end -}}
{{- end -}}
{{ end }}