{# Custom plan builder. Expects: modules, current_modules (dict), csrf (optional), action (form action), submit_label, disabled (bool), note #}
<form method="post" action="{{ action }}" id="custom-form" class="panel" style="border-color:var(--brand2)">
  {% if csrf %}<input type="hidden" name="csrf" value="{{ csrf }}">{% endif %}<input type="hidden" name="plan" value="custom">
  <div class="hdr" style="margin-bottom:8px"><div><div class="muted small">Only what you need</div><h2 style="margin:4px 0 0">Custom plan</h2></div><div style="text-align:right"><div class="amt" style="margin:0"><span style="font-size:14px;color:var(--muted);font-weight:500">$</span><span id="custom-total">{{ custom_min_price }}</span><span>/month</span></div><div class="xs dim">minimum ${{ custom_min_price }} · starts from the Free plan</div></div></div>
  <div class="grid" style="grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px">
  {% for key, m in modules.items() %}{% set cur = current_modules.get(key, 0) %}
    <label class="typecard {% if cur %}on{% endif %}" style="display:flex;gap:10px;align-items:flex-start" data-mod="{{ key }}" data-price="{{ m.price }}">
      {% if m.qty %}<select name="mod_{{ key }}" style="width:64px;padding:4px 6px;font-size:13px" onchange="customTotal()"><option value="0">0</option>{% for i in range(1, m.max + 1) %}<option value="{{ i }}" {% if cur == i %}selected{% endif %}>{{ i }}</option>{% endfor %}</select>
      {% else %}<input type="checkbox" name="mod_{{ key }}" value="1" {% if cur %}checked{% endif %} onchange="customTotal()" style="margin-top:4px">{% endif %}
      <span><b style="display:inline">{{ m.name }}</b> <span class="pill brand">${{ m.price }}{% if m.qty %} each{% endif %}</span><br><span>{{ m.blurb }}</span></span>
    </label>
  {% endfor %}
  </div>
  <div class="actions" style="margin-top:14px;justify-content:space-between"><span class="small muted" id="custom-summary">{{ note or 'Pick modules to see the total.' }}</span>{% if not disabled %}<button class="btn primary">{{ submit_label }}</button>{% else %}<a class="btn primary" href="/signup">{{ submit_label }}</a>{% endif %}</div>
</form>
<script>
function customTotal(){var total=0,parts=[],min={{ custom_min_price }};document.querySelectorAll('#custom-form [data-mod]').forEach(function(l){var p=+l.dataset.price,q=0,el=l.querySelector('select,input');if(el.tagName==='SELECT'){q=+el.value}else{q=el.checked?1:0}l.classList.toggle('on',q>0);if(q){total+=p*q;parts.push(l.querySelector('b').textContent+(el.tagName==='SELECT'?' ×'+q:''))}});
var t=document.getElementById('custom-total'),s=document.getElementById('custom-summary');if(!parts.length){t.textContent=min;s.textContent='Pick modules to see the total.';return}t.textContent=Math.max(min,total);s.textContent=parts.join(' · ')+(total<min?' (minimum $'+min+')':'')}
customTotal();
</script>