#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,
  /// Home button, more or less expect an image in a link
  home: none,
  /// The footer of the page
  footer: none,
  /// Logo of the site
  logo: none,
  /// Navigation menu content, css style expect a list
  menu: none,
  body
) = {
  theme-colors-css
  ```raw-css

  html, body {
    height: 100%;
    margin: 0;
  }

  site-wrapper {
    height: 100%;
    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;
      }
      
      /* Typst keep inserting <p> tags everywhere */
      & > p {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
      }

      home-symbol, home-symbol a {
        display: flex;
        justify-content: center;
        align-items: center;
        /*height: 100%;*/
      }
      home-symbol a {
        /* Unstyle link */
        color: inherit;
        text-decoration: inherit;
        /* cursor: inherit; // we want to keep the clickable cursor */
      }
    }
  
    site-container {
      display: flex;
      flex-direction: column;
      max-width: 60em;
      width: 100%;
      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;
      }

      main {
        flex: 1;
      }

      footer {
        border-top: solid 1px var(--color-border);
        margin-top: 15px;
      }
    }

    code-block {
      display: block;
      overflow: hidden;
      border-radius: 8px;
      margin: 8px;
      background-color: var(--color-code-bg);
      box-shadow: inset 0px 0px 5px 0px #000;
      pre {
        padding: 8px;
        margin: 0;
        overflow: auto;
      }
    }
  }
  ```
  set figure(supplement: none)
  html.body({
    chtml.site-wrapper({
      chtml.site-container({
        html.nav({
          if home != none { chtml.home-symbol(home) }
          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
          })
        }

        html.main(body)

        if footer != none {
          html.footer(footer)
        }
      })
    })
  })
}