// needs JQuery
sclass HTMLTabs {
  S id = "tabs_" + aGlobalID();
  new L<Tab> tabs;
  
  class Tab {
    S id = aGlobalID();
    S label;
    S contents;
    
    *(S *label, S *contents) {}
  }
  
  S css() {
    ret [[
      .tab-selectors {
        background: #add8e6;
        display: flex;
      }
      
      .tab-selector {
        flex: 1;
      }
      
      .tab-selectors .selected {
        font-weight: bold;
      }
    ]];
  }
  
  S html() {
    ret hcss(css()) + div(
      div(mapToLines(tabs, tab ->
        div(tab.label, class := "tab-selector", onclick := "$(" + jsQuote("#" + id + " .tab-page") + ").hide(); "
          + "$(" + jsQuote("#" + tab.id) + ").show();"))
      , class := "tab-selectors")
      + mapToLines(tabs, tab ->
        div(tab.contents, class := "tab-page", style := tab == first(tabs) ? "" : "display: none", id := tab.id)),
    +id, class := "tabs-container");
  }
  
  // label and contents are HTML
  void add(S label, O contents) {
    tabs.add(new Tab(label, strOrNull(contents)));
  }
}