{{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}}
      <span class="text-stone-400">/</span>
      <span class="text-stone-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<article class="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
  <div class="grid gap-8 lg:grid-cols-2">
    {{if .Content.Img}}
    <div class="overflow-hidden rounded-2xl">
      <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full object-cover">
    </div>
    {{end}}
    <div>
      <h1 class="text-4xl font-bold text-stone-900">{{.Content.Title}}</h1>
      {{if .Content.Price}}<div class="mt-4 text-3xl font-bold text-primary">¥{{printf "%.2f" .Content.Price}}</div>{{end}}
      <p class="mt-4 text-base leading-7 text-stone-600">{{.Content.Description}}</p>
      {{if .Content.Ext}}
      {{$spec := index .Content.Ext "spec"}}
      {{$model := index .Content.Ext "model"}}
      {{$version := index .Content.Ext "version"}}
      {{$delivery := index .Content.Ext "delivery"}}
      {{$warranty := index .Content.Ext "warranty"}}
      {{$support := index .Content.Ext "support"}}
      {{if or $spec $model $version $delivery $warranty $support}}
      <div class="mt-6 grid gap-3 sm:grid-cols-2">
        {{if $spec}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">课程特点</span><div class="font-medium text-stone-900">{{$spec}}</div></div>{{end}}
        {{if $model}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">适合人群</span><div class="font-medium text-stone-900">{{$model}}</div></div>{{end}}
        {{if $version}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">课程周期</span><div class="font-medium text-stone-900">{{$version}}</div></div>{{end}}
        {{if $delivery}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">训练频率</span><div class="font-medium text-stone-900">{{$delivery}}</div></div>{{end}}
        {{if $warranty}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">服务保障</span><div class="font-medium text-stone-900">{{$warranty}}</div></div>{{end}}
        {{if $support}}<div class="rounded-xl bg-stone-50 px-4 py-3 text-sm"><span class="text-stone-500">配套支持</span><div class="font-medium text-stone-900">{{$support}}</div></div>{{end}}
      </div>
      {{end}}
      {{end}}
    </div>
  </div>

  <div class="prose prose-lg mt-10 max-w-none">
    <h2>课程详情</h2>
    {{.Content.Content|Str2Html}}
  </div>

  {{if .Content.Tags}}
  <div class="mt-8 border-t border-stone-200 pt-8">
    <h3 class="text-lg font-semibold text-stone-900">标签</h3>
    <div class="mt-3 flex flex-wrap gap-2">
      {{range .Content.Tags}}
      <a href="{{.URL}}" class="rounded-full bg-stone-100 px-3 py-1 text-sm text-stone-700 hover:bg-stone-200">{{.Name}}</a>
      {{end}}
    </div>
  </div>
  {{end}}

  <div class="mt-8 border-t border-stone-200 pt-8">
    <h3 class="text-2xl font-bold text-stone-900 mb-6">相关课程</h3>
    {{$related := Related .Content.Id 4}}
    {{if $related}}
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
      {{range $related}}
      <article class="overflow-hidden rounded-2xl border border-stone-200 bg-white shadow-sm">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-32 w-full object-cover">{{end}}
        <div class="p-4">
          <h4 class="text-base font-semibold text-stone-900">
            <a href="{{.URL}}" class="hover:text-primary">{{.Title}}</a>
          </h4>
        </div>
      </article>
      {{end}}
    </div>
    {{end}}
  </div>
</article>
{{end}}

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