{{define "page"}}
{{- .Keyword -}}
{{end}}

{{define "body"}}
<!-- Search bar -->
<section id="search" class="section p-4">
    <form action="/search">
        <div class="columns">
            {{if .Config "page.results.searchbar.homeBtn"}}
            <div class="column has-text-centered px-1 is-1">
                <a class="button is-fullwidth is-success is-rounded" href="/">
                    <span class="iconify" data-icon="fluent:home-12-regular"></span>
                </a>
            </div>
            {{end}}
            <div id="search-bar" class="column">
                <input id="search-input" class="input is-link is-rounded" type="text" name="q" placeholder="Search"
                    value="{{.Keyword}}">
            </div>
            <div class="column has-text-centered px-1 is-1">
                <button class="button is-fullwidth is-link is-rounded" type="submit">
                    <span class="iconify" data-icon="fe:search"></span>
                </button>
            </div>
            {{if .Config "page.results.searchbar.resetBtn"}}
            <div class="column has-text-centered px-1 is-1">
                <a class="button is-fullwidth is-danger is-rounded" href="#"
                    onclick="document.getElementById('search-input').value = ''">
                    <span class="iconify" data-icon="akar-icons:cross"></span>
                </a>
            </div>
            {{end}}
        </div>
    </form>
</section>

{{if .Card}}
<div id="answer" class="container py-6">
    <div class="card has-background-light">
        <div class="card-content">
            <p class="title" id="card-title">{{.Card.Title}}</p>
            <div class="content">
                {{html .Card.Content}}
            </div>
        </div>
        {{.Card.Footer}}
    </div>
</div>
{{end}}

<!-- Results -->
<section id="results" class="section container py-4 px-6">
    {{if eq (len .Results) 0}}
    <p class="has-text-centered">No results</p>
    {{end}}
    {{- range $index, $result := .Results }}
    <div id="result-{{$index}}">
        <a href="{{$result.Link}}">{{$result.Title}}</a>
        <p>{{$result.Desc}}</p>
        {{if $.Config "page.results.showLink"}}
        <p class="has-text-success">{{$result.Link}}</p>
        {{end}}
        <div class="columns">
            {{if $.Config "page.results.engineTags"}}
            <div class="column has-text-left">
                {{- range $engine := $result.Engines }}
                <span class="tag is-light px-2">{{$engine}}</span>
                {{end}}
            </div>
            {{end}}
            {{if $.Config "page.results.cachedLink"}}
            <div class="column has-text-right">
                <a href="https://web.archive.org/web/{{$result.Link}}">
                    <span class="iconify" data-icon="ic:baseline-cached" data-inline="true"></span>
                    Cached
                </a>
            </div>
            {{end}}
        </div>
        <hr>
    </div>
    {{end}}
</section>

{{if ne (len .Results) 0}}
<!-- Pagination -->
<section id="pagination" class="section container has-text-centered">
    <a class="button is-rounded is-link" {{if eq .Page
        0}}disabled{{else}}href="/search?q={{.Keyword}}&page={{sub .Page 1}}" {{end}}>Prev</a>
    <a class="button is-link mx-4" style="cursor:default;"><span class="icon">{{.Page}}</span></a>
    <a class="button is-rounded is-link" href="/search?q={{.Keyword}}&page={{add .Page 1}}">Next</a>
</section>
{{end}}

{{end}}