{{define "card" -}}
<a class="card" href="/listings/{{.ID}}">
  <div class="card-photo" style="{{photoStyle .Accent}}">
    <span class="emoji" aria-hidden="true">{{.TypeIcon}}</span>
    <span class="type-tag">{{.TypeName}}</span>
    {{if .RentOK}}<span class="price-tag">{{money .RentPerDay}}/day</span>{{end}}
  </div>
  <div class="card-body">
    <h3 class="card-title">{{.Title}}</h3>
    <p class="card-loc">{{.Location}}</p>
    <p class="card-summary">{{.Summary}}</p>
    <div class="chips">{{range .Offers}}<span class="chip">{{.Name}}</span>{{end}}</div>
    <div class="card-foot">
      {{if .SwapOK}}<span class="badge-swap">Open to swap</span>{{end}}
      <span class="foot-date">{{dateRange .AvailStart .AvailEnd}}</span>
    </div>
  </div>
</a>
{{- end}}