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

{{if .Single}}
{{$children := ChildrenColumns "solutions"}}

<main class="pb-12">
  {{if .Nav}}
  <section class="vm-section py-6">
    <div class="vm-breadcrumb">
      <a href="/">首页</a>
      {{range .Nav}}<span class="mx-2">/</span><a href="{{.URL}}">{{.Name}}</a>{{end}}
    </div>
  </section>
  {{end}}

  <section class="vm-section py-8">
    <div class="mb-8 max-w-3xl">
      <h1 class="mt-3 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 class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range $children}}
      {{$badge := ""}}
      {{$scenario := ""}}
      {{$point := ""}}
      {{$deliver := ""}}
      {{$iconLabel := ""}}
      {{$summary := ""}}
      {{$cycle := ""}}
      {{$fit := ""}}
      {{$ext := .Ext}}
      {{if $ext}}
      {{$badge = index $ext "badge"}}
      {{$scenario = index $ext "scenario"}}
      {{$point = index $ext "point"}}
      {{$deliver = index $ext "deliver"}}
      {{$iconLabel = index $ext "icon"}}
      {{$summary = index $ext "summary"}}
      {{$cycle = index $ext "cycle"}}
      {{$fit = index $ext "fit"}}
      {{end}}
      <a href="{{.URL}}" class="vm-hover-card overflow-hidden rounded-[1.5rem] border border-[var(--border)] bg-white">
        <div class="p-5">
          <div class="mb-4 flex items-start justify-between gap-4">
            <div class="flex items-start gap-3">
              <div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[var(--primary-soft)] text-[var(--primary)]">
                {{if $iconLabel}}
                <span class="text-lg font-semibold">{{$iconLabel}}</span>
                {{else}}
                <svg viewBox="0 0 24 24" class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3l7 4v10l-7 4-7-4V7l7-4z"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 7v10"></path>
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5 7l7 4 7-4"></path>
                </svg>
                {{end}}
              </div>
              <div>
                <h2 class="text-xl font-semibold text-[var(--text)]">{{.Name}}</h2>
                {{if $badge}}<span class="mt-2 inline-flex rounded-full bg-white px-3 py-1 text-xs font-semibold text-[var(--primary)]">{{$badge}}</span>{{end}}
              </div>
            </div>
          </div>
          <p class="text-sm leading-7 text-[var(--muted)]">{{if $summary}}{{$summary}}{{else}}{{.Description}}{{end}}</p>
          <div class="mt-4 flex flex-wrap gap-2 text-xs font-semibold">
            {{if $scenario}}<span class="rounded-full bg-white px-3 py-1 text-[var(--muted)]">{{$scenario}}</span>{{end}}
            {{if $point}}<span class="rounded-full bg-white px-3 py-1 text-[var(--muted)]">{{$point}}</span>{{end}}
            {{if $deliver}}<span class="rounded-full bg-white px-3 py-1 text-[var(--muted)]">{{$deliver}}</span>{{end}}
            {{if $cycle}}<span class="rounded-full bg-white px-3 py-1 text-[var(--muted)]">{{$cycle}}</span>{{end}}
          </div>
          {{if and $ext (index $ext "tags")}}
          <div class="mt-4 flex flex-wrap gap-2">
            {{range (index $ext "tags")}}
            <span class="rounded-full border border-[var(--border)] bg-white px-3 py-1 text-xs text-[var(--muted)]">{{.}}</span>
            {{end}}
          </div>
          {{end}}
          <div class="mt-4 grid gap-3 text-sm">
            {{if $scenario}}<div class="rounded-[1.1rem] border border-[var(--border)] bg-white p-3"><span class="font-semibold text-[var(--text)]">场景：</span><span class="text-[var(--muted)]">{{$scenario}}</span></div>{{end}}
            {{if $point}}<div class="rounded-[1.1rem] border border-[var(--border)] bg-white p-3"><span class="font-semibold text-[var(--text)]">能力：</span><span class="text-[var(--muted)]">{{$point}}</span></div>{{end}}
            {{if $deliver}}<div class="rounded-[1.1rem] border border-[var(--border)] bg-white p-3"><span class="font-semibold text-[var(--text)]">交付：</span><span class="text-[var(--muted)]">{{$deliver}}</span></div>{{end}}
            {{if $fit}}<div class="rounded-[1.1rem] border border-[var(--border)] bg-white p-3"><span class="font-semibold text-[var(--text)]">适配：</span><span class="text-[var(--muted)]">{{$fit}}</span></div>{{end}}
          </div>
          <div class="mt-5 text-sm font-semibold text-[var(--primary)]">查看详情</div>
        </div>
      </a>
      {{end}}
    </div>
  </section>
</main>
{{end}}

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