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

{{if .Single}}
<main class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200">
    {{if .Single.Ext}}{{if index .Single.Ext "banner_img"}}<img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="h-72 w-full object-cover">{{end}}{{end}}
    <div class="p-8">
      <div class="flex flex-wrap items-end justify-between gap-4">
        <div>
          <p class="text-sm font-medium text-primary">校园简介</p>
          <h1 class="mt-2 text-3xl font-semibold">{{.Single.Name}}</h1>
          {{if .Single.Description}}<p class="mt-4 max-w-3xl text-base leading-8 text-slate-600">{{.Single.Description}}</p>{{end}}
        </div>
      </div>

      <div class="mt-8 grid gap-6 md:grid-cols-4">
        <div class="rounded-2xl bg-slate-50 p-5">
          <div class="text-sm text-slate-500">在校学生</div>
          <div class="mt-2 text-3xl font-semibold text-primary">1860+</div>
        </div>
        <div class="rounded-2xl bg-slate-50 p-5">
          <div class="text-sm text-slate-500">教职员工</div>
          <div class="mt-2 text-3xl font-semibold text-primary">168+</div>
        </div>
        <div class="rounded-2xl bg-slate-50 p-5">
          <div class="text-sm text-slate-500">教学班级</div>
          <div class="mt-2 text-3xl font-semibold text-primary">42</div>
        </div>
        <div class="rounded-2xl bg-slate-50 p-5">
          <div class="text-sm text-slate-500">校园社团</div>
          <div class="mt-2 text-3xl font-semibold text-primary">28</div>
        </div>
      </div>

      <div class="mt-8 grid gap-6 lg:grid-cols-[1.05fr_0.95fr]">
        <div class="prose prose-slate max-w-none">
          {{.Single.Content|Str2Html}}
        </div>
        <div class="space-y-4">
          <div class="overflow-hidden rounded-2xl">
            <img src="https://images.unsplash.com/photo-1523580846011-d3a5bc25702b?auto=format&fit=crop&w=1400&q=80" alt="校园环境" class="h-56 w-full object-cover">
          </div>
          <div class="rounded-2xl bg-slate-50 p-5 text-sm leading-7 text-slate-600">
            <p>微微中学坚持以学生发展为核心，以课堂质量为基础，以文化建设为支撑，持续营造有温度、有秩序、有品质的校园环境。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
{{end}}

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