#let site-title = [The Wireless Masterclass]

#import "/static/index.typ": stylesheets

#let chapter-title = state("chapter-title", context document.title)

#let docs-page(path, header: auto, footer: auto) = main => document(path, html.html(
  lang: "en_US",
  {
    context chapter-title.update(old => context {
      let head = query(heading.where(level: 1).after(here())).first(default: none)
      return head.body
    })

    html.head({
      html.meta(charset: "utf-8")
      html.meta(name: "viewport", content: "width=device-width, initial-scale=1")
      html.meta(name: "color-scheme", content: "dark light")
      for stylesheet in stylesheets { html.link(rel: "stylesheet", href: stylesheet) }
      html.title(context document.title)
    })
    html.body({
      if (header != none) {
        html.header(if (header == auto) {
          context {
            let doc = query(document).first()
            link(doc.location(), doc.title)
            title(chapter-title.get())
          }

          context {
            let doc = query(selector(document).before(here())).last()
            outline(title: none, target: selector(heading).within(doc.location()))
          }

          html.nav(aria-label: "Page Navigation", context {
            html.ol(style: "list-style-type: none", {
              let nexts = query(selector(document).after(here()))
              if (nexts.len() > 0) {
                html.li(
                  link(nexts.at(0).location(), [Next: #nexts.at(0).title]),
                )
              }

              let prevs = query(selector(document).before(here()))
              if (prevs.len() > 1) {
                html.li(
                  link(prevs.at(-2).location(), [Previous: #prevs.at(-1).title]),
                )
              }
            })
          })
        } else {
          header
        })
      }
      html.main(main)
      if (footer != none) {
        divider()

        html.footer({
          if (footer == auto) {
            html.nav(aria-label: "Page Navigation", context {
              html.ol(style: "list-style-type: none", {
                let nexts = query(selector(document).after(here()))
                if (nexts.len() > 0) {
                  html.li(
                    link(nexts.at(0).location(), [Next: #nexts.at(0).title]),
                  )
                }

                let prevs = query(selector(document).before(here()))
                if (prevs.len() > 1) {
                  html.li(
                    link(prevs.at(-2).location(), [Previous: #prevs.at(-1).title]),
                  )
                }
              })
            })
          } else {
            footer
          }
        })
      }
    })
  },
))

#let callout(kind: str, label: str, body) = html.section(class: kind + " callout", context {
  let depth = counter(heading).at(here()).len() + 1
  heading(
    depth: depth,
    outlined: false,
    numbering: none,
    label,
  )
  " "
  body
})

#let note = callout.with(kind: "note", label: "Note:")
#let warn = callout.with(kind: "warn", label: "Warning:")
#let tip = callout.with(kind: "tip", label: "Tip:")


#let callout(kind: str, label: str, body) = html.section(class: kind + " callout", context {
  let depth = counter(heading).at(here()).len() + 1
  heading(
    depth: depth,
    outlined: false,
    numbering: none,
    label,
  )
  " "
  body
})

#let note = callout.with(kind: "note", label: "Note:")
#let warn = callout.with(kind: "warn", label: "Warning:")
#let tip = callout.with(kind: "tip", label: "Tip:")