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

#let summ = summary(
  base-url: "http://test.example.com",
  path: "/index.html",
  page-label: <index-page>,
  title: "TeTyTe",
  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.",
  ),
  author: "Me!",
  tags: ("test", "html/css", "typst"),
  description: "Test of the TTT template",
  date: datetime(year: 1942, month: 4, day: 1),
)

#show: webpage.with(
  ..summ.template-args,
  header: [
    = Test TeTyTe
    Hello World!
  ],
)


#lorem(400)

Test, `this is not a code block`, end test.

```python
def plopliplop(n: int)
  for i in range(n):
    if i % 3 == 0 and i % 5 == 0:
      print("plopliplop")
    elif i % 3 == 0:
      print("plop")
    elif i % 5 == 0:
      print("plip")
    else:
      print(i)
```

#raw(range(10).map(i => lorem(100)).join("\n"), block: true)

#figure({
  show table: set text(size: 0.80em)
  table( 
    columns: 5,
    //inset: (x: 0% + 5pt, y: 0% + 2pt),
    stroke: none,
    align: center+horizon,
    table.hline(),
    table.header(
      table.cell(colspan: 5, inset: 3pt)[],
      table.cell(rowspan: 2)[*SDK version*],
      table.vline(end: 3),
      table.vline(start: 4),
      table.cell(colspan: 4)[*Number of API methods*],
      [Documented], [In emulator], [Only documented], [Only in emulator],
    ),
    table.cell(colspan: 5, inset: 3pt)[],
    table.hline(),
    table.cell(colspan: 5, inset: 3pt)[],

    [32], [495713], [499837], [1060], [5184],
    [33], [537427], [539236], [1258], [3067],
    [34], [605106], [605098], [26], [18],

    table.cell(colspan: 4, inset: 3pt)[],
    table.hline(),
  )},

  caption: [Comparison of API methods between documentation and emulators],
)<tab:cl-platform_apis>

```raw-css
table {
  //border: 1px solid blue;
  border-bottom: 1px solid #999999;
  border-top: 1px solid #999999;
  border-collapse: collapse;
  margin: 0.4em;
}
th, td {
  padding: 0.2em 0.5em;
}
td {
  //border: 1px solid red;
}

thead {
  border-bottom: 1px solid #999999;
}
```
#table( 
  columns: 5,
  //inset: (x: 0% + 5pt, y: 0% + 2pt),
  //stroke: none,
  align: center+horizon,
  table.hline(),
  table.header(
    table.cell(rowspan: 2)[*SDK version*],
    table.cell(colspan: 4)[*Number of API methods*],
    table.cell(stroke: black)[Documented], [In emulator], [Only documented], [Only in emulator],
  ),
  table.hline(),
  [32], [495713], [499837], [1060], [5184],
  [33], [537427], [539236], [1258], [3067],
  [34], [605106], [605098], [26], [18],
  table.hline(),
)

#figure(
  image(
    "/assets/smol-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.",
  ),
  caption: [A Platypus!]
)
#figure(
  image(
    "/assets/big-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.",
  ),
  caption: [A Big Platypus!]
)