{{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>

  <div class="mt-8 grid gap-8 lg:grid-cols-[minmax(0,1fr)_280px]">
    <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-56 w-full object-cover">
          <div class="p-5">
            <div class="flex flex-wrap gap-2 text-xs text-slate-500">
              {{if index .Ext "subject"}}<span class="rounded-full bg-slate-100 px-2 py-1">{{index .Ext "subject"}}</span>{{end}}
              {{if index .Ext "education"}}<span class="rounded-full bg-slate-100 px-2 py-1">{{index .Ext "education"}}</span>{{end}}
              {{if index .Ext "position"}}<span class="rounded-full bg-slate-100 px-2 py-1">{{index .Ext "position"}}</span>{{end}}
            </div>
            <h2 class="mt-2 text-lg font-semibold">{{.Title}}</h2>
            <p class="mt-2 text-sm leading-7 text-slate-600">{{default (index .Ext "intro") .Description}}</p>
            <div class="mt-4 grid grid-cols-2 gap-2 text-xs text-slate-500">
              <div class="rounded-lg bg-slate-50 p-2">职称：{{default (index .Ext "honor") "-"}}</div>
              <div class="rounded-lg bg-slate-50 p-2">教龄：{{default (index .Ext "years") "-"}}</div>
              <div class="col-span-2 rounded-lg bg-slate-50 p-2">擅长方向：{{default (index .Ext "speciality") "-"}}</div>
            </div>
          </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"}}