{{ define "main" }}
<section class="search-page">
    <header class="search-page__header">
        <h1 class="search-page__heading">
            {{ .Title }}
        </h1>
        {{- with .Content }}
            <div class="search-page__description">
                {{ . }}
            </div>
        {{- else }}
        {{- $description := or .Description (lang.Translate "search_description" | default "Find posts by search term.") }}
            <p class="search-page__description">
                {{ $description }}
            </p>
        {{- end }}
    </header>

    <section class="search-page__container" aria-label="{{ lang.Translate "search_label" | default "Search all posts" }}">
        <form id="search-form" class="search-form" role="search" autocomplete="off">
            <label for="search-input" class="search-form__label" hidden>
                {{ lang.Translate "search_label" | default "Search all posts" }}
            </label>
            <div class="search-form__input-wrapper">
                <input
                    id="search-input"
                    class="search-form__input"
                    type="search"
                    data-index-url="{{ site.Home.RelPermalink }}index.json"
                    placeholder="{{ lang.Translate "search_placeholder" | default "Type to search..." }}"
                />
                <button
                    id="search-reset"
                    type="button"
                    class="search-form__reset"
                    aria-label="{{ lang.Translate "search_reset" | default "Clear search" }}"
                >
                    <span class="search-clear__icon" aria-hidden="true">&times;</span>
                </button>
            </div>
        </form>

    </section>

    <div id="search-results" class="search-page__results" aria-live="polite">
        <p class="search-results__count" hidden>
            <span id="search-results-number">0</span>
            {{ lang.Translate "search_matches" | default "matches" }}
        </p>

        <ul class="search-results__list" hidden></ul>

        {{- /* Hidden template, used for hydrating search results from index.json with JS */ -}}
        <template id="search-result-template">
            {{- $mockPost := dict 
                "Title" "TEMPLATE_TITLE"
                "RelPermalink" "TEMPLATE_URL"
                "Date" now
                "Summary" "TEMPLATE_SUMMARY"
                "Params" (dict "tags" (slice "TEMPLATE_TAG"))
            -}}
            <li class="search-results__list-item">
                {{- partial "list/post-card.html" $mockPost }}
            </li>
        </template>

    </div>
</section>
{{ end }}