{{define "content"}}
<div class="row">
  <div class="col-md-12">
    <h2>Search</h2>
    <form method="GET" action="/search" class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="q">Query</label>
        <input class="form-control" type="text" id="q" name="q"
               value="{{.Data.Query}}" placeholder="query" autocomplete="off">
      </div>
      <div class="form-group">
        <label class="sr-only" for="space">Space</label>
        <select class="form-control" id="space" name="space">
          <option value="">every space</option>
          {{$sel := .Data.Space}}
          {{range .Data.Spaces}}
          <option value="{{.Ref}}" {{if eq .Ref $sel}}selected{{end}}>{{.Ref}}</option>
          {{end}}
        </select>
      </div>
      <button class="btn btn-primary" type="submit">Search</button>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    {{if .Data.Query}}
    <p class="text-muted">{{.Data.Total}} match{{if ne .Data.Total 1}}es{{end}} in {{.Data.Took}}</p>
    {{if .Data.Hits}}
    <ul class="list-unstyled">
      {{range .Data.Hits}}
      <li class="search-hit">
        <a href="{{.Href}}"><strong>{{.Title}}</strong></a>
        <span class="text-muted">— {{.Space}}{{if .Section}} / {{.Section}}{{end}}</span>
        {{if .Snippet}}<div class="search-snippet">{{.Snippet}}</div>{{end}}
      </li>
      {{end}}
    </ul>
    {{else}}
    <p class="text-muted">No documents matched.</p>
    {{end}}
    {{else}}
    <p class="text-muted">Enter a query.</p>
    {{end}}
  </div>
</div>
{{end}}