{% extends "base_operator.html" %}
{% block title %}Provisioning {{ job.coin_name }} — operator{% endblock %}
{% set page = 'op-coins' %}
{% block page_title %}Provisioning {{ job.coin_name }}{% endblock %}
{% block head_extra %}
{% include "_coin_manager_styles.html" %}
{# Poll every 3s while the job is running — plain meta refresh, no SPA #}
{% if job.status == 'running' %}<meta http-equiv="refresh" content="3">{% endif %}
{% endblock %}
{% block breadcrumb %}{% endblock %}

{% block content %}
<div style="max-width:720px">
  {# ── header: spinner | success tick | error ── #}
  <div class="prov-head">
    {% if job.status == 'running' %}
      <div class="prov-spinner"></div>
      <div style="flex:1">
        <div style="font-size:15px;font-weight:600;margin-bottom:3px">Standing up {{ job.coin_name }}…</div>
        <div style="font-size:12.5px;color:var(--text-mute)">This takes a few minutes — you can leave and come back.</div>
        <div class="prov-bar"><div class="prov-fill" style="width:{{ job.percent }}%"></div></div>
      </div>
      <div style="text-align:right"><div class="prov-pct">{{ job.percent }}%</div><div style="font-family:var(--mono);font-size:11px;color:var(--text-mute);margin-top:4px">elapsed {{ job.elapsed | duration }}</div></div>
    {% elif job.status == 'done' %}
      <div style="width:48px;height:48px;border-radius:50%;background:rgba(91,207,154,.14);border:2px solid var(--pos);display:flex;align-items:center;justify-content:center;flex:0 0 48px;color:var(--pos)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:22px;height:22px"><path d="M20 6L9 17 4 12"/></svg></div>
      <div style="flex:1"><div style="font-size:15px;font-weight:600;margin-bottom:3px;color:var(--pos)">{{ job.coin_name }} is live</div><div style="font-size:12.5px;color:var(--text-mute)">All services are up and the chain is syncing on testnet.</div></div>
      <div style="display:flex;gap:8px"><a href="https://{{ job.subdomain }}" target="_blank" rel="noopener" class="btn btn-o btn-sm">View pool ↗</a><a href="/operator/coins/{{ job.ticker }}" class="btn btn-pos btn-sm">Coin detail →</a></div>
    {% else %}
      <div style="width:48px;height:48px;border-radius:50%;background:rgba(255,99,99,.14);border:2px solid var(--neg);display:flex;align-items:center;justify-content:center;flex:0 0 48px;color:var(--neg)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:22px;height:22px"><path d="M12 9v4M12 17h.01"/><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"/></svg></div>
      <div style="flex:1"><div style="font-size:15px;font-weight:600;margin-bottom:3px;color:var(--neg)">Provisioning failed</div><div style="font-size:12.5px;color:var(--text-mute)">A step failed — retry it below, or remove the partial coin.</div></div>
      <form method="post" action="/operator/coins/{{ job.ticker }}/provision/retry"><input type="hidden" name="csrf" value="{{ csrf_token }}"><button class="btn btn-neg btn-sm">Retry failed step</button></form>
    {% endif %}
  </div>

  {# ── ordered checklist ── #}
  <div class="card" style="padding:0">
    <div class="checklist">
      {% for step in job.steps %}
      <div class="cl-item">
        <div class="cl-ic {{ step.state }}">
          {% if step.state == 'done' %}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="width:13px;height:13px"><path d="M20 6L9 17 4 12"/></svg>
          {% elif step.state == 'error' %}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px;height:13px"><path d="M18 6L6 18M6 6l12 12"/></svg>
          {% endif %}
        </div>
        <div class="cl-body">
          <div class="cl-t {% if step.state=='pending' %}pending{% endif %}">{{ step.name }}</div>
          {% if step.detail %}<div class="cl-d {% if step.state=='error' %}err{% endif %}">{{ step.detail }}</div>{% endif %}
        </div>
        <div class="cl-right">{% if step.elapsed %}{{ step.elapsed | duration }}{% elif step.state=='running' %}…{% else %}—{% endif %}</div>
        {% if step.state == 'error' %}
        <form method="post" action="/operator/coins/{{ job.ticker }}/provision/retry" style="margin-left:8px"><input type="hidden" name="csrf" value="{{ csrf_token }}"><button class="btn btn-neg btn-sm">Retry</button></form>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>
  {% if job.status == 'running' %}
  <div style="margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--text-mute);text-align:center">Auto-refreshing every 3s · safe to close this tab</div>
  {% endif %}
</div>
{% endblock %}