{{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-7xl px-4 py-10 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-[minmax(0,1fr)_340px] lg:items-start">
    <article class="space-y-8">
      <section class="overflow-hidden rounded-3xl bg-slate-950 text-white shadow-xl">
        <div class="grid gap-0 lg:grid-cols-[1.1fr_0.9fr]">
          <div class="p-8 lg:p-10">
            <p class="text-sm text-emerald-200">关于我们</p>
            <h1 class="mt-3 text-4xl font-semibold leading-tight">{{.Single.Name}}</h1>
            {{if .Single.Description}}<p class="mt-5 max-w-2xl text-base leading-8 text-slate-300">{{.Single.Description}}</p>{{end}}
            <div class="mt-8 grid gap-3 sm:grid-cols-3">
              {{range index .ThemesExt "service_cards"}}
              <div class="rounded-2xl bg-white/10 p-4 backdrop-blur">
                <div class="text-sm font-medium text-white">{{index . "title"}}</div>
                <div class="mt-2 text-sm leading-6 text-slate-300">{{index . "desc"}}</div>
              </div>
              {{end}}
            </div>
          </div>
          <div class="min-h-[280px]">
            {{if .Single.Ext}}{{if index .Single.Ext "banner_img"}}<img src="{{index .Single.Ext "banner_img"}}" alt="{{.Single.Name}}" class="h-full w-full object-cover">{{end}}{{end}}
          </div>
        </div>
      </section>

      <section class="rounded-3xl bg-white p-8 shadow-sm ring-1 ring-slate-200">
        <div class="prose prose-slate max-w-none">
          {{.Single.Content|Str2Html}}
        </div>
      </section>
    </article>

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

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