// 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 {
        display: flex;
      }
      
      .tab-selector {
        flex: 1;
        cursor: pointer;
        margin: 2px 2px;
      }
      
      .tab-selectors .selected {
        font-weight: bold;
        background: #add8e6;
      }
      
      .tabs-container {
         border-radius: 25px;
         border: 2px solid #73AD21;
         padding: 20px;
      }
    ]];
  }
  
  S html() {
    ret hcss(css()) + div(
      div(mapToLines(tabs, tab ->
        div(tab.label, class := "tab-selector" + stringIf(tab == first(tabs), " selected"), onclick :=
            "$(" + jsQuote("#" + id + " .tab-selector") + ").removeClass('selected'); " 
          + "$(this).addClass('selected'); "
          + "$(" + 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)));
  }
}