{{define "content" -}}
{{with .Data}}{{$l := .L}}
<section class="section"><div class="wrap">
  <p><a href="/listings" class="card-loc">&larr; Back to browse</a></p>
  <div class="detail-hero" style="{{photoStyle $l.Accent}}"><span class="emoji" aria-hidden="true">{{$l.TypeIcon}}</span></div>

  <div class="detail-grid">
    <div>
      <span class="badge {{statusClass $l.Status}}">{{$l.Status}}</span>
      <h1 class="detail-title">{{$l.Title}}</h1>
      <p class="card-loc detail-sub">{{$l.TypeName}} &middot; {{$l.Location}} &middot; Hosted by {{$l.Owner.Name}}</p>
      <p class="detail-desc">{{$l.Description}}</p>

      <div class="give-get">
        <div class="gg offers">
          <h4>What this listing offers</h4>
          <div class="chips">{{range $l.Offers}}<span class="chip">{{.Name}}</span>{{else}}<span class="card-loc">&mdash;</span>{{end}}</div>
        </div>
        <div class="gg requires">
          <h4>What the owner is looking for</h4>
          <div class="chips">
            {{range $l.ReqTypes}}<span class="chip chip-gold">{{.Icon}} {{.Name}}</span>{{end}}
            {{range $l.ReqFeatures}}<span class="chip chip-gold">{{.Name}}</span>{{end}}
            {{if $l.ReqMinAge}}<span class="chip chip-gold">Age {{$l.ReqMinAge}}+</span>{{end}}
            {{if $l.ReqNoKids}}<span class="chip chip-gold">No kids</span>{{end}}
            {{if $l.ReqNoPets}}<span class="chip chip-gold">No pets</span>{{end}}
            {{if not (or $l.ReqTypes $l.ReqFeatures $l.ReqMinAge $l.ReqNoKids $l.ReqNoPets)}}<span class="card-loc">Open to anything</span>{{end}}
          </div>
        </div>
      </div>
    </div>

    <aside class="panel">
      <h3>Availability &amp; terms</h3>
      <div class="kv-line"><span class="k">Available</span><span class="v">{{dateRange $l.AvailStart $l.AvailEnd}}</span></div>
      <div class="kv-line"><span class="k">Swap</span><span class="v">{{if $l.SwapOK}}Yes{{else}}No{{end}}</span></div>
      <div class="kv-line"><span class="k">Rent</span><span class="v">{{if $l.RentOK}}{{money $l.RentPerDay}}/day{{else}}Not offered{{end}}</span></div>
      <a class="btn btn-primary btn-block" href="#matches">See mutual matches &darr;</a>
    </aside>
  </div>

  <div class="match-strip" id="matches">
    <div class="section-head"><h2>Your mutual matches</h2></div>
    <p class="card-loc match-intro">Only places where <strong>each side fits the other</strong> &mdash; your requirements and theirs &mdash; with overlapping availability.</p>
    {{if .Matches}}
      {{range .Matches}}
      <a class="match-card" href="/listings/{{.Listing.ID}}">
        <div class="match-emoji" style="{{photoStyle .Listing.Accent}}" aria-hidden="true">{{.Listing.TypeIcon}}</div>
        <div class="match-main">
          <div class="mt">{{.Listing.Title}}</div>
          <div class="ms">{{.Listing.TypeName}} &middot; {{.Listing.Location}} &middot; Hosted by {{.Listing.Owner.Name}}</div>
        </div>
        <div class="match-meta"><span class="match-mode">{{.Mode}}</span><div class="match-dates">{{.Overlap}}</div></div>
      </a>
      {{end}}
    {{else}}
      <div class="empty">No mutual matches yet &mdash; a match needs the other owner to want your asset too, on overlapping dates.</div>
    {{end}}
  </div>
</div></section>
{{end}}
{{- end}}