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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-red-100 bg-stone-100 py-4">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="flex items-center gap-2 text-sm text-stone-600">
      <a href="/" class="hover:text-primary">首页</a>
      {{range .Nav}}
      <span class="text-stone-400">/</span>
      <a href="{{.URL}}" class="hover:text-primary">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Single}}
<section class="mx-auto max-w-5xl px-4 py-12 sm:px-6 lg:px-8">
  <div class="rounded-2xl border border-red-100 bg-white p-6 shadow-sm md:p-8">
    <h1 class="text-3xl font-bold text-stone-900">{{.Single.Name}}</h1>
    {{if .Single.Description}}<p class="mt-3 text-base leading-7 text-stone-600">{{.Single.Description}}</p>{{end}}
    <div class="mt-8 grid gap-6 lg:grid-cols-2">
      <div class="rounded-xl bg-red-50 p-5 text-sm leading-7 text-stone-700">
        留言适合试课预约、课程咨询、会员续费和企业团课合作。
      </div>
      <div class="rounded-xl bg-stone-50 p-5 text-sm leading-7 text-stone-700">
        <div class="font-semibold text-stone-900">服务内容</div>
        <div class="mt-2">体测预约、课程安排、教练匹配、门店咨询。</div>
      </div>
    </div>
    <div class="prose prose-lg mt-8 max-w-none">
      {{.Single.Content|Str2Html}}
    </div>
    {{if eq 1 .Site.EnableMessage}}
    <div class="mt-8 rounded-xl border border-stone-200 bg-stone-50 p-5 text-sm text-stone-600">
      后台开启留言功能后，可在这里展示留言列表或留言入口。
    </div>
    {{end}}
  </div>
</section>
{{end}}

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