{{include "header.html"}}
{{include "nav.html"}}

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="mx-auto max-w-7xl px-4 py-4 text-sm text-slate-500 sm:px-6 lg:px-8">
    <a href="/" class="hover:text-primary">首页</a>
    {{range .Nav}} <span class="px-2">/</span> <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>{{end}}
  </div>
</nav>
{{end}}
{{end}}

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="flex flex-col gap-3">
    <h1 class="text-3xl font-semibold">{{if .Single}}{{.Single.Name}}{{else if .CurrentColumn}}{{.CurrentColumn.Title}}{{else}}房源列表{{end}}</h1>
    {{if .Single.Description}}<p class="max-w-3xl text-slate-600">{{.Single.Description}}</p>{{else if .CurrentColumn.Description}}<p class="max-w-3xl text-slate-600">{{.CurrentColumn.Description}}</p>{{end}}
  </div>

  {{$filters := ColumnExtFilter .CurrentColumn .Request}}
  {{if $filters}}
  <div class="mt-6 rounded-xl bg-white p-5 shadow-sm ring-1 ring-slate-200">
    <div class="mb-4 flex items-center justify-between">
      <h2 class="text-sm font-semibold text-slate-700">筛选条件</h2>
      {{if .CurrentColumn}}<a href="{{.CurrentColumn.URL}}" class="text-sm text-slate-500 hover:text-primary">重置筛选</a>{{end}}
    </div>
    <div class="space-y-4">
      {{range $filters}}
      {{if or (eq .Label "户型") (eq .Label "位置") (eq .Label "小区")}}
      <div class="flex flex-col gap-2 border-b border-slate-100 pb-4 last:border-0 last:pb-0 md:flex-row md:items-start">
        <div class="shrink-0 text-sm font-medium text-slate-700 md:w-20">{{.Label}}</div>
        <div class="flex flex-wrap gap-2">
          {{$hasOption := false}}
          {{range .Options}}
          {{if .URL}}
          {{$hasOption = true}}
          <a href="{{.URL}}" class="rounded-full px-3 py-1.5 text-sm {{if .Selected}}bg-primary text-white{{else}}bg-slate-100 text-slate-600 hover:bg-slate-200{{end}}">{{.Label}}</a>
          {{end}}
          {{end}}
          {{if not $hasOption}}<span class="text-sm text-slate-400">暂无可筛选项</span>{{end}}
        </div>
      </div>
      {{end}}
      {{end}}
    </div>
  </div>
  {{end}}

  <div class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-start">
    <section>
      {{if .List}}
      <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
        {{range .List}}
        <a href="{{.URL}}" class="overflow-hidden rounded-xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md">
          <img src="{{DefaultCover .Img}}" alt="{{.Title}}" class="h-48 w-full object-cover">
          <div class="p-5">
            <div class="flex items-center justify-between text-xs text-slate-500">
              <span>{{.ColumnName}}</span>
              {{if .Ext}}{{if index .Ext "badge"}}<span class="rounded-full bg-teal-50 px-2 py-1 text-primary">{{index .Ext "badge"}}</span>{{end}}{{end}}
            </div>
            <h2 class="mt-2 text-lg font-semibold">{{.Title}}</h2>
            <div class="mt-3 flex flex-wrap gap-2 text-sm text-slate-600">
              {{if and .Ext (index .Ext "layout")}}<span>{{index .Ext "layout"}}</span>{{end}}
              {{if and .Ext (index .Ext "location")}}<span>{{index .Ext "location"}}</span>{{end}}
              {{if and .Ext (index .Ext "community")}}<span>{{index .Ext "community"}}</span>{{end}}
              {{if and .Ext (index .Ext "area")}}<span>{{index .Ext "area"}}</span>{{end}}
              {{if and .Ext (index .Ext "decoration")}}<span>{{index .Ext "decoration"}}</span>{{end}}
              {{if and .Ext (index .Ext "features")}}<span>{{index .Ext "features"}}</span>{{end}}
            </div>
            {{if and .Ext (index .Ext "price_range")}}<div class="mt-3 text-sm font-medium text-primary">{{index .Ext "price_range"}}</div>{{else if .Price}}<div class="mt-3 text-sm font-medium text-primary">{{printf "¥%.0f" .Price}}</div>{{end}}
          </div>
        </a>
        {{end}}
      </div>

      {{if .Pager.Enabled}}
      <div class="mt-10 flex justify-center">
        <nav class="flex flex-wrap gap-2">
          {{if .Pager.HasPrev}}<a href="{{.Pager.PrevURL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">上一页</a>{{end}}
          {{range .Pager.Items}}
          {{if .Active}}<span class="rounded bg-primary px-4 py-2 text-sm text-white">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">{{.Label}}</a>{{end}}
          {{end}}
          {{if .Pager.HasNext}}<a href="{{.Pager.NextURL}}" class="rounded border border-slate-200 bg-white px-4 py-2 text-sm hover:border-primary hover:text-primary">下一页</a>{{end}}
        </nav>
      </div>
      {{end}}
      {{else}}
      <div class="rounded-xl bg-white p-10 text-center text-slate-500 shadow-sm ring-1 ring-slate-200">暂无房源</div>
      {{end}}
    </section>

    {{if index .ThemesExt "show_sidebar"}}
    {{include "sidebar.html"}}
    {{end}}
  </div>
</main>

{{include "footer.html"}}
{{include "js.html"}}