#import "./custom_html.typ" as chtml
#import "./theme_picker.typ": theme-picker
#import "./theme_colors.typ": theme-colors-css
#import "./nav_menu.typ": nav-menu, nav-menu-toggle

/// Make the body of the webpage
#let html_body(
  /// The visible header of the page
  header: none,
  /// Logo of the site
  logo: none,
  /// Navigation menu content, css style expect a list
  menu: none,
  body
) = {
  theme-colors-css
  ```raw-css
  site-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;

    nav {
      display: flex;
      theme-picker {
        margin-left: auto;
      }
      & > * {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  
    site-container {
      width: 1050px;
      padding: 0 20px;
  
      header {
        // display: flex
        // flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        padding: 15px 5px;
        border-bottom: solid 1px var(--color-border);
        margin-top: 15px;
      }
    }

    code-block {
      display: flex;
      justify-content: center;
      align-items: center;

      pre {
        width: min-content;
        padding: 8px;
        border-radius: 8px;
        background-color: var(--color-code-bg);
        box-shadow: inset 0px 0px 5px 0px #000;
      }
    }
  }
  ```
  html.body({
    chtml.site-wrapper({
      chtml.site-container({
        html.nav({
          theme-picker()
          if menu != none { nav-menu-toggle() }
        })
        if menu != none {
          nav-menu(menu)
        }
        if header != none or logo != none {
          html.header(style: "display: flex; flex-wrap: wrap-reverse;", {
            html.hgroup({
              header
            })
            logo
          })
        }
        body
      })
    })
  })
}