<div data-step="3">
  <h2 class="s-step-title">{{ t.sup_step3_title }}</h2>
  <p class="s-step-sub">{{ t.sup_step3_sub }}</p>

  <form hx-post="{{ url_for('suppliers.signup_step', step=3) }}"
        hx-target="#signup-step" hx-swap="innerHTML">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="_accumulated" value='{{ data | tojson }}'>

    <div class="s-credit-grid">
      <label class="s-credit-card {% if not data.get('credit_pack') %}s-credit-card--selected{% endif %}"
             onclick="this.parentNode.querySelectorAll('.s-credit-card').forEach(c=>c.classList.remove('s-credit-card--selected')); this.classList.add('s-credit-card--selected')">
        <input type="radio" name="credit_pack" value="" {% if not data.get('credit_pack') %}checked{% endif %}>
        <div class="amount">0</div>
        <div class="price">{{ t.sup_step3_free }}</div>
        <div class="per">{{ t.sup_step3_free_desc }}</div>
      </label>
      {% for cp in credit_packs %}
      <label class="s-credit-card {% if data.get('credit_pack') == cp.key %}s-credit-card--selected{% endif %}"
             onclick="this.parentNode.querySelectorAll('.s-credit-card').forEach(c=>c.classList.remove('s-credit-card--selected')); this.classList.add('s-credit-card--selected')">
        <input type="radio" name="credit_pack" value="{{ cp.key }}" {% if data.get('credit_pack') == cp.key %}checked{% endif %}>
        <div class="amount">{{ cp.amount }}</div>
        <div class="price">&euro;{{ cp.price }}</div>
        <div class="per">&euro;{{ '%.2f' | format(cp.price / cp.amount) }}/credit</div>
      </label>
      {% endfor %}
    </div>

    <div class="s-nav">
      <button type="button" class="s-btn-back"
              hx-post="{{ url_for('suppliers.signup_step', step=1) }}"
              hx-target="#signup-step" hx-swap="innerHTML"
              hx-include="[name='_accumulated']">{{ t.sup_btn_back }}</button>
      <button type="submit" class="s-btn-next">{{ t.sup_step3_next }}</button>
    </div>
  </form>
</div>
