{% extends "base.html" %}
{% block content %}
<h1>New Application</h1>
<p class="muted">Pick the account type. Castor loads the real KYC requirements that institutions ask for.</p>

<form method="post" class="form">
  <label>Account type
    <select name="account_type" id="account_type">
      {% for key, info in reqs.items() %}
        <option value="{{ key }}">{{ info['label'] }}</option>
      {% endfor %}
    </select>
  </label>

  <div id="preview" class="preview"></div>

  <label>Institution
    <input type="text" name="institution" placeholder="e.g. Chase, Vanguard, Coinbase, PayPal" required>
  </label>

  <button type="submit" class="btn primary">Start application</button>
</form>

<script>
  const reqs = {{ reqs | tojson }};
  const sel = document.getElementById('account_type');
  const preview = document.getElementById('preview');
  function render() {
    const info = reqs[sel.value];
    preview.innerHTML = '<strong>Requirements:</strong><ul>' +
      info.requirements.map(r => '<li>' + r + '</li>').join('') + '</ul>';
  }
  sel.addEventListener('change', render);
  render();
</script>
{% endblock %}