{% extends "base.html" %}
{% block body %}
<div class="hero" style="padding-bottom:20px">
  <h1>Dedicated <span class="glow">IPs</span>.</h1>
  <p class="lede">One clean IP, yours alone. Static datacenter or premium residential-ISP. Provisioned automatically from a global pool.</p>
</div>

<div class="dash-grid">
  <div class="card">
    <h3>Configure your IP</h3>
    <form method="post" action="/dedicated/buy" onsubmit="document.getElementById('loc_name').value=document.getElementById('loc').selectedOptions[0].textContent">
      <label>Type</label>
      <div class="grid" style="grid-template-columns:1fr 1fr">
        {% for pid, p in products.items() %}
        <label class="switch" style="cursor:pointer">
          <input type="radio" name="product" value="{{ pid }}" {% if loop.first %}checked{% endif %} style="width:auto">
          <span>{{ p.name }}</span>
        </label>
        {% endfor %}
      </div>

      <label>Duration</label>
      <div class="grid" style="grid-template-columns:1fr 1fr 1fr">
        {% for days in [30, 60, 90] %}
        <label class="switch" style="cursor:pointer">
          <input type="radio" name="days" value="{{ days }}" {% if days == 30 %}checked{% endif %} style="width:auto">
          <span>{{ days }}d</span>
        </label>
        {% endfor %}
      </div>

      <label>Location</label>
      <select id="loc" name="location_id"></select>
      <input type="hidden" name="location_name" id="loc_name" value="">

      <input type="submit" value="Order dedicated IP">
    </form>
  </div>

  <div>
    <div class="card">
      <h3>Pricing</h3>
      {% for pid, p in products.items() %}
      <p class="muted" style="margin:0 0 6px"><strong style="color:var(--text)">{{ p.name }}</strong> — {{ p.desc }}</p>
      {% for days, (_, sats) in p.plans.items() %}
      <div class="copy" style="margin-bottom:4px">
        <span class="mono" style="flex:1">{{ days }} days</span>
        <span class="mono" style="color:var(--neon)">{{ sats }} sats</span>
      </div>
      {% endfor %}
      <hr style="border-color:var(--border);margin:12px 0">
      {% endfor %}
      <p class="muted" style="font-size:12px">IPs provision automatically after payment (usually minutes). You get the host:port + credentials in your dashboard once live.</p>
    </div>
  </div>
</div>

<script>
const locs = {
  3: {{ dc_locs | tojson }},
  9: {{ isp_locs | tojson }}
};
function updateLocs() {
  const pid = document.querySelector('input[name=product]:checked').value;
  const sel = document.getElementById('loc');
  sel.innerHTML = '';
  (locs[pid] || []).forEach(([id, name, stock]) => {
    const o = document.createElement('option');
    o.value = id; o.textContent = name + (stock ? '' : ' — out of stock');
    if (!stock) o.disabled = true;
    sel.appendChild(o);
  });
}
document.querySelectorAll('input[name=product]').forEach(r => r.onchange = updateLocs);
updateLocs();
</script>
{% endblock %}