Modular app/builder/tabs/sim.py

"""builder/tabs/sim.py — Simulation Engine tab HTML."""


def tab_sim_html() -> str:
    return """<div id="tab-sim" class="panel">
  <div class="stitle">Simulation Engine</div>
  <div class="sdesc">Select grain → see relevant competitors & cross-elasticities → run 4 scenarios → implement chosen scenario.</div>
  <div class="sim-outer">
    <div class="sim-panel"><div class="sim-ttl">Configure Scenario</div>
      <div class="sim-f"><div class="sim-lbl">Channel</div><select id="s-ch" style="width:100%" onchange="updateSimCompetitors()"><option value="ALL">All</option><option value="MT">MT</option><option value="TT">TT</option></select></div>
      <div class="sim-f"><div class="sim-lbl">Region</div><select id="s-rg" style="width:100%" onchange="updateSimCompetitors()"><option value="ALL">All</option><option value="All India">All India</option><option value="East">East</option><option value="North">North</option><option value="South">South</option><option value="West">West</option></select></div>
      <div class="sim-f"><div class="sim-lbl">Pack</div><select id="s-pack" style="width:100%" onchange="updateSimCompetitors()"><option value="ALL">All</option><option value="20-30">20-30ml</option><option value="33-80">33-80ml</option><option value="85-150">85-150ml</option><option value="170-240">170-240ml</option><option value="250-400">250-400ml</option><option value="400+">400+ml</option></select></div>
      <div id="sim-grain-info"></div>
      <div class="sim-f"><div class="sim-lbl">Focal Brand Price Change %</div><input type="number" id="s-dabur" value="5" step="0.5" style="width:100%"></div>
      <div class="comp-section">
        <div class="comp-sec-ttl">Competitor Response % <span style="font-size:8px;font-weight:400;color:var(--mt)">(from model cross-elasticity)</span></div>
        <div id="sim-comp-inputs"><div style="font-size:9px;color:var(--mt);font-style:italic;padding:4px 0">Select a grain to see relevant competitors</div></div>
      </div>
      <div style="background:var(--sf);border:1px solid var(--bd);border-radius:7px;padding:9px 11px;margin-top:10px;font-size:9px;color:var(--mt)">ΔVol = OwnE × ΔP% + Σ(CompE × CompΔP%) &nbsp;·&nbsp; ΔGC = ΔRevenue − VarCost × ΔVol</div>
      <button class="sim-run" onclick="runSim()" style="margin-top:10px">▶ Run 4 Scenarios</button>
    </div>
    <div style="flex:1;min-width:0">
      <div id="sim-results"><div style="background:#fff;border:1px solid var(--bd);border-radius:10px;padding:40px;text-align:center;color:var(--mt)">Configure and click Run</div></div>
      <div id="sim-implement"></div>
    </div>
  </div>
</div>"""