<div data-step="2">
  <h2 class="s-step-title">{{ t.sup_step2_title }}</h2>
  <p class="s-step-sub">{{ t.sup_step2_sub_pre }} {% if included_boosts %}{{ t.sup_step2_sub_included }}{% endif %}</p>

  <form hx-post="{{ url_for('suppliers.signup_step', step=2) }}"
        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-boost-grid">
      {% set selected_boosts = data.get('boosts', []) %}
      {% for b in boosts %}
      {% set is_included = b.type in (included_boosts or []) %}
      <label class="s-boost-card {% if is_included %}s-boost-card--included{% elif b.type in selected_boosts %}s-boost-card--selected{% endif %}"
             {% if not is_included %}onclick="this.classList.toggle('s-boost-card--selected')"{% endif %}>
        {% if is_included %}
        <input type="checkbox" name="boosts" value="{{ b.type }}" checked disabled>
        {% else %}
        <input type="checkbox" name="boosts" value="{{ b.type }}"
               {% if b.type in selected_boosts %}checked{% endif %}>
        {% endif %}
        <strong>{{ b.name }}</strong>
        {% if is_included %}
        <span class="boost-included">{{ t.sup_step2_included }}</span>
        {% else %}
        <span class="boost-price">&euro;{{ b.price }}/mo</span>
        {% endif %}
        <span class="boost-desc">{{ b.desc }}</span>
      </label>
      {% endfor %}
    </div>

    <div class="s-nav">
      <button type="button" class="s-btn-back"
              hx-get="{{ url_for('suppliers.signup_step', step=1) }}?_accumulated={{ data | tojson | urlencode }}"
              hx-target="#signup-step" hx-swap="innerHTML">{{ t.sup_btn_back }}</button>
      <button type="submit" class="s-btn-next">{{ t.sup_step2_next }}</button>
    </div>
  </form>
</div>
