{% extends "base_operator.html" %}
{% block title %}Add {{ draft.coin_name | default('coin') }} — operator{% endblock %}
{% set page = 'op-coins' %}
{% block page_title %}{{ draft.coin_name | default('New coin') }}{% if wizard_step==1 %} · choose{% elif wizard_step==2 %} · configure{% else %} · review{% endif %}{% endblock %}
{% block head_extra %}{% include "_coin_manager_styles.html" %}{% endblock %}
{% block breadcrumb %}<div class="op-bc"><a href="/operator/coins">Coin Manager</a><span class="sl">/</span><a href="/operator/coins/add">Add</a><span class="sl">/</span></div>{% endblock %}

{% block content %}
<div style="max-width:680px">
  {# ── stepper ── #}
  <div class="wiz-steps">
    <div class="wstep"><div class="wstep-c {% if wizard_step>1 %}done{% elif wizard_step==1 %}active{% endif %}">{% if wizard_step>1 %}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:12px;height:12px"><path d="M20 6L9 17 4 12"/></svg>{% else %}1{% endif %}</div><div class="wstep-l {% if wizard_step==1 %}active{% elif wizard_step>1 %}done{% endif %}">Choose</div></div>
    <div class="wstep-ln {% if wizard_step>1 %}done{% endif %}"></div>
    <div class="wstep"><div class="wstep-c {% if wizard_step>2 %}done{% elif wizard_step==2 %}active{% endif %}">{% if wizard_step>2 %}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:12px;height:12px"><path d="M20 6L9 17 4 12"/></svg>{% else %}2{% endif %}</div><div class="wstep-l {% if wizard_step==2 %}active{% elif wizard_step>2 %}done{% endif %}">Configure</div></div>
    <div class="wstep-ln {% if wizard_step>2 %}done{% endif %}"></div>
    <div class="wstep"><div class="wstep-c {% if wizard_step==3 %}active{% endif %}">3</div><div class="wstep-l {% if wizard_step==3 %}active{% endif %}">Review &amp; provision</div></div>
  </div>

  {# ════ STEP 1 — choose/identity ════ #}
  {% if wizard_step == 1 %}
  <form method="post" action="/operator/coins/add/{{ draft.source }}/step2"><input type="hidden" name="csrf" value="{{ csrf_token }}">
    <div class="card">
      <div class="card-t">Coin identity</div>
      {% if draft.is_custom %}
      <div class="g2">
        <div class="field"><label>Coin name</label><input name="coin_name" placeholder="e.g. NovoCoin" value="{{ draft.coin_name }}" required /></div>
        <div class="field"><label>Ticker</label><input class="mono" name="ticker" value="{{ draft.ticker }}" maxlength="5" required /><div class="hint">3–5 chars · uppercase · unique · checked live</div>{% if errors.ticker %}<div class="err">{{ errors.ticker }}</div>{% endif %}</div>
      </div>
      <div class="g2">
        <div class="field"><label>Brand colour</label><div class="swatches" style="padding-top:3px">{% for col in ['#5BCF9A','#7B83FF','#D9BB6F','#FF6363','#50E3B8'] %}<label class="swatch {% if draft.colour==col %}on{% endif %}" style="background:{{ col }}"><input type="radio" name="colour" value="{{ col }}" hidden {% if draft.colour==col %}checked{% endif %}></label>{% endfor %}</div><div class="hint" style="margin-top:11px">Tints the coin across the pool UI</div></div>
        <div class="field"><label>Decimals</label><input class="mono" name="decimals" value="{{ draft.decimals | default('8') }}" /><div class="hint">Smallest unit · 8 = like Bitcoin</div></div>
      </div>
      {% else %}
      {# Established coin — identity locked from catalogue #}
      <div style="display:flex;align-items:center;gap:13px">
        <div class="cm" style="border-color:color-mix(in srgb,{{ draft.colour }} 45%,transparent);background:color-mix(in srgb,{{ draft.colour }} 10%,transparent);color:{{ draft.colour }}">{{ draft.ticker }}</div>
        <div><div style="font-size:16px;font-weight:600">{{ draft.coin_name }}</div><div class="tk" style="font-family:var(--mono);font-size:11px;color:var(--text-mute);margin-top:3px">{{ draft.ticker }} · {{ draft.algorithm }} · {{ 'Native' if draft.engine=='native' else 'Miningcore' }}</div></div>
      </div>
      {% endif %}
    </div>
    <div style="display:flex;justify-content:space-between;margin-top:18px"><a href="/operator/coins/add" class="btn btn-g">← Back to catalogue</a><button type="submit" class="btn btn-p">Next: configure →</button></div>
  </form>

  {# ════ STEP 2 — configure ════ #}
  {% elif wizard_step == 2 %}
  <form method="post" action="/operator/coins/add/{{ draft.source }}/step3"><input type="hidden" name="csrf" value="{{ csrf_token }}">
    <div class="card" style="margin-bottom:14px">
      <div class="card-t">Network</div>
      <div class="netopt">
        <label class="net {% if draft.network=='testnet' %}on{% endif %}"><input type="radio" name="network" value="testnet" hidden {% if draft.network=='testnet' %}checked{% endif %}><div class="net-t"><span class="dot d-pos"></span>testnet</div><div class="net-d">Public test chain · valueless coins · the default for hosted demos</div></label>
        <label class="net {% if draft.network=='regtest' %}on{% endif %}"><input type="radio" name="network" value="regtest" hidden {% if draft.network=='regtest' %}checked{% endif %}><div class="net-t"><span class="dot d-mut"></span>regtest</div><div class="net-d">Private regression chain · instant blocks · isolated testing</div></label>
        {# mainnet: LOCKED on hosted demo, unlockable in buyer's live build #}
        <div class="net locked" {% if POOL_MODE=='live' %}data-unlockable="true"{% endif %}><div class="net-t"><svg viewBox="0 0 24 24" fill="none" stroke="var(--text-mute)" stroke-width="1.7" style="width:13px;height:13px"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>mainnet</div><div class="net-d">Mainnet pools run on the buyer's own deployment, not our hosted demo.</div></div>
      </div>
    </div>
    <div class="card" style="margin-bottom:14px">
      <div class="card-t">Economics{% if POOL_MODE=='demo' %} · demonstration coins, no monetary value{% endif %}</div>
      <div class="g3">
        <div class="field" style="margin:0"><label>Operator fee %</label><input class="mono" name="fee_pct" value="{{ draft.fee_pct | default('1.0') }}" /></div>
        <div class="field" style="margin:0"><label>Minimum payout</label><input class="mono" name="min_payout" value="{{ draft.min_payout | default('1.000') }}" /></div>
        <div class="field" style="margin:0"><label>Maturity confs</label><input class="mono" name="maturity" value="{{ draft.maturity | default('100') }}" /></div>
      </div>
    </div>
    <div class="card">
      <div class="card-t">Network address</div>
      <div class="field" style="margin-bottom:14px"><label>Subdomain</label><input class="mono" name="subdomain" value="{{ draft.subdomain | default(draft.ticker | lower ~ '.demo.getcrypto.co.in') }}" /><div class="hint">Auto-suggested from ticker · editable</div></div>
      <div class="field" style="margin:0"><label>Ports</label><input class="mono ro" value="assigned on provision (node · RPC · stratum · indexer)" disabled /><div class="hint">Auto-allocated from the free pool</div></div>
    </div>
    <div style="display:flex;justify-content:space-between;margin-top:18px"><a href="/operator/coins/add/{{ draft.source }}" class="btn btn-g">← Back</a><button type="submit" class="btn btn-p">Next: review →</button></div>
  </form>

  {# ════ STEP 3 — review & provision ════ #}
  {% else %}
  <div class="card" style="margin-bottom:14px">
    <div class="card-t">What will be created</div>
    <div class="review-stack">
      <div class="review-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4"/></svg><span class="t">Node + wallet</span><span class="d">{{ draft.coin_name }} daemon · {{ draft.network }}</span></div>
      <div class="review-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 9h16M8 14h2M8 17h4"/></svg><span class="t">Indexer + explorer</span><span class="d">block/tx browser</span></div>
      <div class="review-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M13 3L4 14H11L10 21L20 9H13Z"/></svg><span class="t">Stratum</span><span class="d"><span class="badge {% if draft.engine=='native' %}b-native{% else %}b-mc{% endif %}" style="font-size:9px">{{ 'Native' if draft.engine=='native' else 'Miningcore' }}</span> {{ draft.algorithm }}</span></div>
      <div class="review-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7V19A2 2 0 0 0 5 21H21V9H5A2 2 0 0 1 3 7A2 2 0 0 1 5 5H19"/></svg><span class="t">Faucet</span><span class="d">testnet dispenser</span></div>
      <div class="review-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><circle cx="12" cy="12" r="9"/><path d="M2 12h20M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/></svg><span class="t">Subdomain</span><span class="d">{{ draft.subdomain }}</span></div>
    </div>
  </div>
  <div class="op-sect" style="padding:0 0 10px">Resource estimate</div>
  <div class="resbox">
    <div class="ops"><div class="ops-l">Disk</div><div class="ops-v tnum" style="font-size:1.1rem">~{{ draft.est_disk }} GB</div><div class="ops-s">{{ draft.network }} chain</div></div>
    <div class="ops"><div class="ops-l">RAM</div><div class="ops-v tnum" style="font-size:1.1rem">~{{ draft.est_ram }} GB</div><div class="ops-s">node + stratum</div></div>
    <div class="ops" style="border-left:2px solid var(--warn)"><div class="ops-l">Sync time</div><div class="ops-v tnum" style="font-size:1.1rem;color:var(--warn)">~{{ draft.est_sync }}</div><div class="ops-s">not instant</div></div>
  </div>
  <div style="background:rgba(245,166,35,.06);border:1px solid rgba(245,166,35,.28);border-radius:var(--rl);padding:13px 16px;display:flex;gap:12px;align-items:center;margin-bottom:16px">
    <svg viewBox="0 0 24 24" fill="none" stroke="var(--warn)" stroke-width="1.7" style="width:16px;height:16px;flex:0 0 16px"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>
    <div style="font-size:12.5px;color:var(--text-mid);line-height:1.45">This stands up <b style="color:var(--text)">real containers</b> on the server.{% if POOL_MODE=='demo' %} {{ draft.coin_name }} is a testnet demonstration — its coins have no monetary value.{% endif %}</div>
  </div>
  <form method="post" action="/operator/coins/add/{{ draft.source }}/provision" onsubmit="return confirm('Provision {{ draft.coin_name }}? This spins up real containers and takes several minutes.')"><input type="hidden" name="csrf" value="{{ csrf_token }}">
    <div style="display:flex;justify-content:space-between"><a href="/operator/coins/add/{{ draft.source }}/step2" class="btn btn-g">← Back</a><button type="submit" class="btn btn-pos">Provision coin →</button></div>
  </form>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
// Brand-colour swatches: move the selected ring + check the hidden radio on click.
document.querySelectorAll('.swatch').forEach(function (sw) {
  sw.addEventListener('click', function () {
    document.querySelectorAll('.swatch').forEach(function (s) { s.classList.remove('on'); });
    sw.classList.add('on');
    var r = sw.querySelector('input[type=radio]');
    if (r) { r.checked = true; }
  });
});
</script>
{% endblock %}