///|
pub fn BrandBook::to_html(self : BrandBook) -> String {
  let css = self.palette.colors.map(fn(c) { "    \{c.css_var()}" }).join("\n")
  join_lines([
    "",
    "",
    "",
    "  ",
    "  ",
    "  \{escape_html(self.name)}",
    "  ",
    "",
    "",
    "
",
    "  
\{escape_html(self.name)}
",
    "  
\{escape_html(self.tagline)}
",
    self.voice.to_html(),
    self.assets.to_html(),
    self.palette.to_html(),
    self.typography.to_html(),
    "  
Components
\{self.components.map(fn(c) { c.to_html() }).join("")}
",
    "  
Incorrect Usage
\{self.forbidden.map(fn(rule) { rule.to_html() }).join("")}
",
    "  
Source
\{escape_html(self.metadata.source)}
Maintainer: \{escape_html(self.metadata.maintainer)} ยท License: \{escape_html(self.metadata.license)}
",
    "
",
    "",
    "",
  ])
}

///|
pub fn Voice::to_html(self : Voice) -> String {
  "
Voice
Tone: \{escape_html(self.tone)}
    \{html_list(self.writing_principles)}
"
}

///|
pub fn AssetSet::to_html(self : AssetSet) -> String {
  let alternates = self.alternate_logos
    .map(fn(logo) { logo.to_html() })
    .join("")
  "
Logo Usage
\{self.primary_logo.to_html()}
Alternate Logos
\{alternates}
Imagery style: \{escape_html(self.imagery_style)}
"
}

///|
pub fn Logo::to_html(self : Logo) -> String {
  "
\{escape_html(self.name)}
  • Asset: \{escape_html(self.path)}
  • Minimum width: \{self.min_width_px}px
  • Clear space: \{escape_html(self.clear_space.describe())}
  • Background: \{escape_html(self.background.describe())}
"
}

///|
pub fn Palette::to_html(self : Palette) -> String {
  let rows = self.colors
    .map(fn(c) {
      "\{escape_html(c.name)}\{escape_html(c.value)}\{escape_html(c.role)}"
    })
    .join("")
  let gradients = self.gradients
    .map(fn(g) {
      "
  • \{escape_html(g.name)}: \{g.angle}deg, \{escape_html(g.stops.join(" -> "))}; \{escape_html(g.usage)}
    • "
    })
    .join("")
  "
    Color
    \{rows}
    TokenValueRole
    Gradients
      \{gradients}
    "
}

///|
pub fn Typography::to_html(self : Typography) -> String {
  let families = self.families
    .map(fn(f) {
      "
  • \{escape_html(f.name)}: \{escape_html(f.usage)}; fallback \{escape_html(f.fallback)}
    • "
    })
    .join("")
  let scale = self.scale
    .map(fn(step) {
      "\{escape_html(step.name)}\{step.size_px}px\{step.line_height_px}px"
    })
    .join("")
  "
    Typography
    Families
      \{families}
    Scale
    \{scale}
    StepSizeLine height
    "
}

///|
pub fn ComponentSpec::to_html(self : ComponentSpec) -> String {
  "
    \{escape_html(self.name)}
    \{escape_html(self.purpose)}
    • Anatomy: \{escape_html(self.anatomy.join(", "))}
    • Tokens: \{escape_html(self.tokens.join(", "))}
    • States: \{escape_html(self.states.join(", "))}
    "
}

///|
pub fn MisuseRule::to_html(self : MisuseRule) -> String {
  "
    \{escape_html(self.title)}
    Why it fails: \{escape_html(self.reason)}
    Use instead: \{escape_html(self.replacement)}
    "
}