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

{{if .Nav}}
<section class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
  <div class="text-sm text-[var(--muted)]">
    <a href="/" class="hover:text-[var(--primary)]">首页</a>
    {{range .Nav}}<span class="mx-2">/</span><a href="{{.URL}}" class="hover:text-[var(--primary)]">{{.Name}}</a>{{end}}
  </div>
</section>
{{end}}

{{if .Single}}
{{$banner := index .Single.Ext "banner_img"}}
{{$cases := ColumnContents "cases" 12}}
<main class="mx-auto max-w-7xl px-4 pb-10 sm:px-6 lg:px-8">
  {{if $banner}}
  <section class="overflow-hidden rounded-[2rem] border border-[var(--border)] bg-white">
    <div class="relative h-64 md:h-96">
      <img src="{{$banner}}" alt="{{.Single.Column.Name}}" class="h-full w-full object-cover">
      <div class="absolute inset-0 bg-gradient-to-r from-white/90 via-white/55 to-transparent"></div>
      <div class="absolute inset-0 flex items-end p-6 md:p-10">
        <div class="max-w-3xl">
          <h1 class="mt-2 text-3xl font-semibold text-[var(--text)] md:text-5xl">{{.Single.Column.Name}}</h1>
          {{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
        </div>
      </div>
    </div>
  </section>
  {{else}}
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <h1 class="text-3xl font-semibold text-[var(--text)] md:text-4xl">{{.Single.Column.Name}}</h1>
    {{if .Single.Column.Description}}<p class="mt-4 text-base leading-8 text-[var(--muted)]">{{.Single.Column.Description}}</p>{{end}}
  </section>
  {{end}}

  {{if $cases}}
  <section class="mt-8">
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range $cases}}
      <a href="{{.URL}}" class="vm-hover-card overflow-hidden rounded-[1.5rem] border border-[var(--border)] bg-white">
        {{if .Img}}<div class="aspect-[16/10] bg-[var(--surface-blue)]"><img src="{{.Img}}" alt="{{.Title}}" class="h-full w-full object-cover"></div>{{end}}
        <div class="p-5">
          <div class="mb-3 flex items-center justify-between gap-3">
            {{if .Ext}}{{if index .Ext "badge"}}<span class="rounded-full bg-[var(--primary-soft)] px-3 py-1 text-xs font-semibold text-[var(--primary)]">{{index .Ext "badge"}}</span>{{end}}{{end}}
            {{if .Ext}}{{if index .Ext "industry"}}<span class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--muted)]">{{index .Ext "industry"}}</span>{{end}}{{end}}
          </div>
          <h3 class="text-xl font-semibold text-[var(--text)]">{{.Title}}</h3>
          <p class="mt-2 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
          {{if .Ext}}
          <div class="mt-4 grid gap-2 text-sm text-[var(--muted)]">
            {{if index .Ext "challenge"}}<div><span class="font-semibold text-[var(--text)]">难点：</span>{{index .Ext "challenge"}}</div>{{end}}
            {{if index .Ext "solution"}}<div><span class="font-semibold text-[var(--text)]">方案：</span>{{index .Ext "solution"}}</div>{{end}}
            {{if index .Ext "result"}}<div><span class="font-semibold text-[var(--text)]">结果：</span>{{index .Ext "result"}}</div>{{end}}
            {{if index .Ext "cycle"}}<div><span class="font-semibold text-[var(--text)]">周期：</span>{{index .Ext "cycle"}}</div>{{end}}
          </div>
          {{end}}
        </div>
      </a>
      {{end}}
    </div>
  </section>
  {{end}}
</main>
{{end}}

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