{{define "content" -}}
<section class="section"><div class="wrap">
  {{with .Data}}{{$f := .Filter}}
  <div class="section-head"><h2>Browse listings</h2><span class="card-loc">{{len .Listings}} place{{if ne (len .Listings) 1}}s{{end}}</span></div>
  <form class="filters" method="get" action="/listings">
    <div class="field">
      <label for="type">Asset type</label>
      <select name="type" id="type">
        <option value="">Any type</option>
        {{range .Types}}<option value="{{.Slug}}" {{if eq $f.TypeSlug .Slug}}selected{{end}}>{{.Icon}} {{.Name}}</option>{{end}}
      </select>
    </div>
    <div class="field">
      <label for="feature">Feature</label>
      <select name="feature" id="feature">
        <option value="">Any feature</option>
        {{range .Features}}<option value="{{.Slug}}" {{if eq $f.FeatureSlug .Slug}}selected{{end}}>{{.Name}}</option>{{end}}
      </select>
    </div>
    <div class="field" style="flex:1;min-width:180px">
      <label for="q">Search</label>
      <input type="text" name="q" id="q" placeholder="Location or name" value="{{$f.Q}}">
    </div>
    <button class="btn btn-primary btn-sm" type="submit">Filter</button>
    <a class="btn btn-ghost btn-sm" href="/listings">Reset</a>
  </form>
  {{if .Listings}}
  <div class="grid">{{range .Listings}}{{template "card" .}}{{end}}</div>
  {{else}}
  <div class="empty">No listings match those filters. <a href="/listings">Clear filters</a>.</div>
  {{end}}
  {{end}}
</div></section>
{{- end}}