{{ template "head" . }}
{{ template "nav" . }}
<main id="results" class="flow2">
    <h1>{{ .Data.Title }} {{ if ne .Data.Site "" }} for {{ .Data.Site }} {{ end }}</h1>

    <form method="GET" class="search">
        <label for="search">Search {{ .SiteName }} </label>
        <span class="search__input">
            <input type="search" minlength="1" required name="q" placeholder="Search" value="{{ .Data.Query }}" class="search-box" id="search" maxlength="6000">
            {{ if ne .Data.Site "" }} 
                <input type="hidden" value="{{ .Data.Site }}" name="site">
            {{ end }}
            <button type="submit" class="search__button" aria-label="Search" title="Search">
                <svg viewBox="0 0 420 300" xmlns="http://www.w3.org/2000/svg" baseProfile="full" style="background:var(--secondary)" width="42" height="30" fill="none"><path d="M90 135q60-60 120-60 0 0 0 0 60 0 120 60m-120 60a60 60 0 01-60-60 60 60 0 0160-60 60 60 0 0160 60 60 60 0 01-60 60m45-15h0l30 30m-75-15h0v45m-45-60h0l-30 30" stroke-width="81" stroke-linecap="square" stroke-linejoin="round" stroke="var(--primary)"/></svg>
            </button>
        </span>
    </form>
    {{ if ne .Data.Site "" }} 
     <!-- add a button to clear the search results if a site:<domain> param has been used -->
        <form method="GET" class="search">
            <span class="search__input">
                <input type="hidden" minlength="1" required name="q" placeholder="Search" value="{{ .Data.Query }}" class="search-box" id="search">
                <button type="submit" value="clear" name="clear">Clear</button>
                </button>
            </span>
        </form>
    {{ else }}
        <nav>
            <ul class="result-nav-list">
                <li title="content from webring sites only"
                    class="{{ if .Data.IsInternal }} result__current {{ end }}">
                    <a href="/?q={{ .Data.Query }}">Webring</a>
                </li>
                <li title="content linked from webring sites, but which reside outside it"
                    class="{{ if .Data.IsInternal | not }} result__current {{ end }}">
                    <a href="/outgoing?q={{ .Data.Query }}">Outgoing</a>
                </li>
            </ul>
        </nav>
    {{ end }}
    <article>
        <ul role="list" class="flow2 two-columns width-126ch">
        {{ range $index, $a := .Data.Pages }}
            <li class="entry">
                <a aria-described-by="link-{{ $index }}" class="entry__link" href="{{ .URL }}">{{ .Title }}</a>
                <p id="link-{{ $index }}" class="entry__text">{{ .About }}</p>
            </li>
        {{ end }}
        </ul>
    </article>
{{ template "footer" . }}
