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

<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  {{if .CurrentColumn}}
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="max-w-3xl">
      <div class="section-kicker">{{.CurrentColumn.Name}}</div>
      <h1 class="mt-4 text-4xl font-semibold">{{.CurrentColumn.Title}}</h1>
      {{if .CurrentColumn.Description}}<p class="mt-4 text-lg leading-8 text-[var(--muted)]">{{.CurrentColumn.Description}}</p>{{end}}
    </div>
  </section>
  {{end}}

  {{if .List}}
  <section class="mt-8">
    {{if eq .CurrentColumn.Slug "software"}}
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range .List}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">{{end}}
        <div class="flex items-center justify-between gap-4">
          <span class="badge">{{index .Ext "badge"}}</span>
          <span class="text-sm text-[var(--muted)]">{{index .Ext "deployment"}}</span>
        </div>
        <h2 class="mt-4 text-2xl font-semibold">{{.Title}}</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
        <div class="mt-5 grid gap-2 text-sm">
          <div><span class="text-[var(--muted)]">场景：</span>{{index .Ext "scenario"}}</div>
          <div><span class="text-[var(--muted)]">功能：</span>{{index .Ext "function"}}</div>
          <div><span class="text-[var(--muted)]">接入：</span>{{index .Ext "access"}}</div>
        </div>
      </a>
      {{end}}
    </div>
    {{else if eq .CurrentColumn.Slug "hardware"}}
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range .List}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">{{end}}
        <div class="text-sm text-[var(--muted)]">{{index .Ext "model"}}</div>
        <h2 class="mt-3 text-2xl font-semibold">{{.Title}}</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
        <div class="mt-5 grid gap-2 text-sm">
          <div><span class="text-[var(--muted)]">参数：</span>{{index .Ext "spec"}}</div>
          <div><span class="text-[var(--muted)]">安装：</span>{{index .Ext "install"}}</div>
          <div><span class="text-[var(--muted)]">环境：</span>{{index .Ext "environment"}}</div>
        </div>
      </a>
      {{end}}
    </div>
    {{else if eq .CurrentColumn.Slug "cases"}}
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range .List}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">{{end}}
        <div class="text-sm text-[var(--muted)]">{{index .Ext "location"}} · {{index .Ext "year"}}</div>
        <h2 class="mt-3 text-2xl font-semibold">{{.Title}}</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
        <div class="mt-5 text-sm text-[var(--primary)]">{{index .Ext "result"}}</div>
      </a>
      {{end}}
    </div>
    {{else if eq .CurrentColumn.Slug "news"}}
    <div class="space-y-4">
      {{range .List}}
      <a href="{{.URL}}" class="flex flex-col gap-4 rounded-2xl border border-[var(--border)] bg-white p-5 md:flex-row">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="h-40 w-full rounded-xl object-cover md:w-56">{{else}}<div class="h-40 w-full rounded-xl bg-[var(--surface-soft)] md:w-56"></div>{{end}}
        <div class="flex-1">
          <div class="text-sm text-[var(--muted)]">{{ParseTime .CreatedAt "2006-01-02"}} · {{.Author}}</div>
          <h2 class="mt-2 text-2xl font-semibold">{{.Title}}</h2>
          <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
        </div>
      </a>
      {{end}}
    </div>
    {{else if eq .CurrentColumn.Slug "jobs"}}
    <div class="grid gap-5 md:grid-cols-2">
      {{range .List}}
      <a href="{{.URL}}" class="card">
        {{if .Img}}<img src="{{.Img}}" alt="{{.Title}}" class="mb-4 h-48 w-full rounded-2xl object-cover">{{end}}
        <div class="flex gap-4">
          {{if index .Ext "photo"}}<img src="{{index .Ext "photo"}}" alt="{{.Title}}" class="h-24 w-24 rounded-2xl object-cover">{{end}}
          <div class="flex-1">
            <h2 class="text-2xl font-semibold">{{.Title}}</h2>
            <div class="mt-2 text-sm text-[var(--muted)]">{{index .Ext "location"}} · {{index .Ext "salary"}}</div>
            <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
          </div>
        </div>
      </a>
      {{end}}
    </div>
    {{else}}
    <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
      {{range .List}}
      <a href="{{.URL}}" class="card">
        <h2 class="text-2xl font-semibold">{{.Title}}</h2>
        <p class="mt-3 text-sm leading-7 text-[var(--muted)]">{{.Description}}</p>
      </a>
      {{end}}
    </div>
    {{end}}
  </section>

  {{if .Pager.Enabled}}
  <div class="mt-10 flex items-center justify-center gap-2">
    {{range .Pager.Items}}
    {{if .Active}}<span class="pager active">{{.Label}}</span>{{else if .URL}}<a href="{{.URL}}" class="pager">{{.Label}}</a>{{end}}
    {{end}}
  </div>
  {{end}}
  {{else}}
  <div class="mt-10 rounded-2xl border border-[var(--border)] bg-white p-10 text-center text-[var(--muted)]">暂无内容</div>
  {{end}}
</main>

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