#import "@local/template-web:0.0.1": *
#import "/lib.typ": webpage

#let preview-image = image(
  "/assets/platypus.png",
  alt: "A drawing of a blue-ish round-ish platypus with big eyes, holding a laptop. This platypus is quite cute, but I might be biased.",
)
#show: webpage.with(
  path: "/cards.html",
  title: "Summary cards",
  description: "Showcase the summary card system",
  date: datetime(year: 1942, month: 4, day: 1),
  tags: ("test", "html/css", "typst"),
  page-label: <cards-page>,
  preview-image: preview-image,
  header: [
    = Summary Cards
    Showcase summary cards
  ],
)


#context state-page-summaries.at(here()).last().card


#let perm = (17, 6, 20, 19, 15, 5, 13, 11, 14, 12, 16, 10, 2, 3, 1, 9, 7, 4, 18, 8)
#let summaries = range(20).map(i => 
  summary(
    url: "https://example.com/tst/" + str(perm.at(i)),
    title: "Card " + str(perm.at(i)),
    tags: if perm.at(i) == 20 {
      ("tag2", "tag5","loooooonnnnnnnnnnnnnng-tag","some-tag","some-other-tag")
    } else {
      (2, 3, 5, 7).filter(j => calc.rem(perm.at(i), j) == 0).map(j => "tag" + str(j))
    },
    preview-image: preview-image,
    img-copyright: if calc.rem(i, 3) == 0 { [Histausse ] } else { none },
    author: "Me!",
    description: lorem(10 * calc.rem(i * 123,  10)),
    date: datetime(year: 2000, month: 12, day: perm.at(i)),
    page-label: label("dummy-label-" + str(perm.at(i))),
  )
)
#card-list(
  min-width: 200,
  summaries,
)

== Card Link Targets
Cards need a label to link to. Usually it is the label of a page, but here we don't generate the pages, to we target elements of this list:

#for i in range(20) [
  - Target of card #i #label("dummy-label-" + str(perm.at(i)))
]