{{include "header.html"}}
{{include "nav.html"}}
<main class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="section-kicker">资讯信息</div>
    <h1 class="mt-4 text-4xl font-semibold">农业动态与技术文章</h1>
  </section>
  <div class="mt-8 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-44 w-full rounded-xl object-cover md:w-64 md:flex-none">{{else}}<div class="h-44 w-full rounded-xl bg-[var(--surface-soft)] md:w-64 md:flex-none"></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>
</main>
{{include "footer.html"}}
{{include "js.html"}}