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

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

{{if .Single}}
{{if .Single.Ext}}
{{$banner := index .Single.Ext "banner_img"}}
{{if $banner}}
<section class="relative h-64 md:h-80">
  <img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover">
  <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
    <h1 class="text-4xl md:text-5xl font-bold text-white">{{.Single.Name}}</h1>
  </div>
</section>
{{end}}
{{end}}

<section class="bg-gray-50">
  <article class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-10">
      {{if not (index .Single.Ext "banner_img")}}
      <h1 class="text-4xl font-bold text-gray-900 mb-4">{{.Single.Name}}</h1>
      {{end}}

      {{if .Single.Description}}
      <p class="text-xl text-gray-600 mb-8">{{.Single.Description}}</p>
      {{end}}

      <div class="prose prose-lg max-w-none">
        {{.Single.Content|Str2Html}}
      </div>
    </div>
  </article>
</section>
{{end}}

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