{% extends "base.html" %}{% from "_macros.html" import page_head, flash, csrf %}
{% macro die() %}<svg class="die" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="8" cy="8" r="1.6" fill="currentColor"/><circle cx="16" cy="8" r="1.6" fill="currentColor"/><circle cx="12" cy="12" r="1.6" fill="currentColor"/><circle cx="8" cy="16" r="1.6" fill="currentColor"/><circle cx="16" cy="16" r="1.6" fill="currentColor"/></svg>{% endmacro %}
{% macro val(s) %}{% if s.unit == "pts" %}{{ (s.value * 100)|round|int }} pts{% elif s.unit == "$" %}${{ s.value|int }}{% else %}{{ s.value|int }} {{ s.unit }}{% endif %}{% endmacro %}
{% block title %}Pick a style{% endblock %}
{% block content %}
{% include "_lab_nav.html" %}
{# web/strategy_pick.py, alpha layout (alpha_picker): five styles by name (profiles.ALPHA_STYLES), sizing, one tweak drawer. Never a code or a `why`. #}
{% call page_head("Pick a style", "Follow one of five trading styles with fantasy money at the exchange's real prices: Formula 1 on Polymarket. Nothing is sent to an exchange, and you can switch between race weekends.") %}
<a href="/strategy">← Your strategy</a>{% endcall %}
{{ flash(msg) }}
<p class="pick-now">Following now: <b>{{ running or "nothing yet" }}</b>{% if not profile %}. Pick a style below to start getting calls.{% endif %}</p>
{% if demo_locked %}<p class="muted">This is a demo account: it keeps the strategy it shows, so the page is read-only here.</p>
{% elif weekend_note %}<p class="flash bad" role="status">{{ weekend_note }}</p>{% endif %}
<form method="post" action="/strategy/pick" class="pick pick-alpha">
  {{ csrf() }}
  <fieldset aria-label="Strategy"{{ ' disabled' if locked }}>
  <input type="hidden" name="rolled" value="" data-rolled>
  <div class="style-cards">
  {% for o in opts %}
  <div class="style-card{{ ' on' if o.code == now }}">
    <h3><span class="mt-badge mt-{{ o.kind }}" title="{{ 'Maker: rests its own quotes and waits to be filled' if o.kind == 'maker' else 'Taker: buys at the price the market shows' }}" aria-label="{{ o.kind }}">{{ 'M' if o.kind == 'maker' else 'T' }}</span> {{ o.label }}{% if o.code == now %} <span class="pill good">following</span>{% endif %}</h3>
    <p>{{ o.blurb }}</p>
    <p class="style-bt"><span><span class="{{ 'good' if o.roi[0] >= 0 else 'bad' }}">2026 {{ "{:+.0%}".format(o.roi[0]) }}</span> · <span class="{{ 'good' if o.roi[1] >= 0 else 'bad' }}">2025 {{ "{:+.0%}".format(o.roi[1]) }}</span></span>
      <span class="legend">backtest, season return on F$1,000 at our standard sizing</span></p>
    {% if o.in_sample %}<p><span class="pill no">in-sample: tuned on the same seasons it's scored on</span></p>{% endif %}
    <button type="submit" name="code" value="{{ o.code }}" class="{{ 'primary' if o.code == chosen }}">Follow {{ o.label }}</button>
  </div>
  {% endfor %}
  </div>
  <div class="pick-sizing">
    <span class="l">Sizing</span>
    <label><input type="radio" name="sizing" value="standard"{{ ' checked' if sizing != "kelly" }}> Standard: the backtests' stakes, scaled to your F$ balance (one F$1,000 for this and your own trades)</label>
    <label><input type="radio" name="sizing" value="kelly"{{ ' checked' if sizing == "kelly" }}> Kelly <span class="pill no">untested for this strategy</span></label>
    <div class="pick-kelly" data-kelly-box data-labels='{{ kelly_labels|tojson }}'>
      <span class="pick-slider"><span>Kelly fraction: <b data-kelly-out>{{ (kelly * 100)|round|int }}%</b> <b data-kelly-label>{{ kelly_label }}</b></span>
        <input type="range" name="kelly" min="{{ kelly_cfg.lo }}" max="{{ kelly_cfg.hi }}" step="{{ kelly_cfg.step }}" value="{{ kelly }}" data-kelly></span>
      <span class="pick-kelly-picks">{% for name, f in kelly_picks %}<button type="button" class="dice-btn" data-kelly-pick="{{ f }}">{{ name }}</button>{% endfor %}</span>
      <span class="legend">Kelly sizes each bet by how big the edge is and how much you have; half and quarter Kelly bet less of it, for smaller swings.</span>
    </div>
  </div>
  {% if drawer %}<details class="pick-tweak" data-tweak>
    <summary>Tweak it</summary>
    <p class="legend">Moves apply to the style you follow next. A tweaked style has no backtest: it is untested, scored live from the next race weekend.</p>
    {% for s in drawer %}
    <span class="pick-slider"><span>{{ s.label }}: <b data-out="tweak:{{ s.name }}">{{ val(s) }}</b>
      <span class="pill no" data-untested{{ ' hidden' if s.value == s.base }}>untested: scored live from the next race weekend</span></span>
      <input type="range" name="tweak:{{ s.name }}" min="{{ s.lo }}" max="{{ s.hi }}" step="{{ s.step }}" value="{{ s.value }}" data-unit="{{ s.unit }}" data-base="{{ s.base }}">
      <input type="hidden" name="tweak_from:{{ s.name }}" value="{{ s.base }}"></span>
    {% endfor %}
    <button type="button" class="dice-btn" data-roll hidden>{{ die() }} Roll these settings</button>
  </details>{% endif %}
  </fieldset>
</form>
{% if profile and not locked %}<form method="post" action="/strategy/pick" class="inline">{{ csrf() }}<input type="hidden" name="code" value="none">
  <button type="submit">Stop: follow nothing</button></form>{% endif %}
{% endblock %}