{% extends "base.html" %}
{% block body %}
<h2>Dashboard</h2>
<div class="stats-row">
  <div class="card stat"><span class="lbl">Balance</span><span class="val">{{ '%.2f'|format(user.balance_gb) }} GB</span></div>
  <div class="card stat"><span class="lbl">Used</span><span class="val">{{ '%.3f'|format(used_gb) }} GB</span></div>
  <div class="card stat"><span class="lbl">Status</span>
    <span class="val" style="color:{{ 'var(--ok)' if user.active else 'var(--danger)' }}">{{ 'ACTIVE' if user.active else 'INACTIVE' }}</span>
  </div>
</div>

{% if not user.active %}
<div class="flash warn">Account inactive — <a href="/plans">top up</a> to activate your proxies.</div>
{% endif %}

<div class="dash-grid">
  <div>
    <div class="card">
      <h3>Connection strings</h3>
      <label>SOCKS5</label>
      <div class="copy">
        <input type="text" readonly value="{{ socks }}" onclick="this.select()">
        <button onclick="copy(this.previousElementSibling)">Copy</button>
      </div>
      <label>HTTP (HTTPS tunneling)</label>
      <div class="copy">
        <input type="text" readonly value="{{ http }}" onclick="this.select()">
        <button onclick="copy(this.previousElementSibling)">Copy</button>
      </div>
      <p class="muted" style="font-size:12px;margin-bottom:0">Proxy password is unique to you. Use it for proxy auth, not your web password.</p>
      <form method="post" action="/dashboard/rotate" style="margin-top:14px">
        <input type="submit" value="Rotate proxy password">
      </form>
    </div>
  </div>

  <div class="card">
    <h3>Location &amp; session</h3>
    <form method="post" action="/dashboard/location">
      <label>Country (ISO code, e.g. US, GB, JP, DE)</label>
      <input type="text" name="country" value="{{ user.country }}" placeholder="US">
      <label>City (optional)</label>
      <input type="text" name="city" value="{{ user.city }}" placeholder="New York">
      <label>Region (optional, e.g. europe)</label>
      <input type="text" name="region" value="{{ user.region }}" placeholder="">
      <div class="switch" style="margin-top:14px">
        <input type="checkbox" name="sticky" id="sticky" {% if user.sticky %}checked{% endif %} style="width:auto">
        <label for="sticky" style="margin:0">Sticky session (hold IP 30 min)</label>
      </div>
      <input type="submit" value="Save location">
    </form>
  </div>
</div>

{% if dedicated %}
<div class="card" style="margin-top:18px">
  <h3>Dedicated IPs</h3>
  {% for d in dedicated %}
  <div style="border:1px solid var(--border);border-radius:8px;padding:12px;margin:10px 0">
    <div style="display:flex;justify-content:space-between">
      <strong style="color:var(--text)">{{ d.product_name }} · {{ d.location_name }}</strong>
      <span style="color:{{ {'active':'var(--ok)','provisioning':'var(--warn)','pending_payment':'var(--warn)','failed':'var(--danger)','expired':'var(--muted)'}.get(d.status,'var(--muted)') }}">{{ d.status }}</span>
    </div>
    {% if d.status == 'active' %}
      <div class="copy" style="margin-top:8px">
        <input type="text" readonly value="{{ d.proxy_host }}:{{ d.proxy_port }}" onclick="this.select()">
        <button onclick="copy(this.previousElementSibling)">Copy</button>
      </div>
      <div class="copy" style="margin-top:6px">
        <input type="text" readonly value="{{ d.proxy_user }}:{{ d.proxy_pass }}" onclick="this.select()">
        <button onclick="copy(this.previousElementSibling)">Copy</button>
      </div>
    {% elif d.status in ('provisioning','pending_payment') %}
      <p class="muted" style="font-size:12px;margin:6px 0 0">Provisioning — refresh shortly for your IP.</p>
    {% endif %}
  </div>
  {% endfor %}
  <p class="muted" style="font-size:12px;margin:0"><a href="/dedicated">Order another dedicated IP →</a></p>
</div>
{% else %}
<p class="muted" style="margin-top:18px">No dedicated IPs yet — <a href="/dedicated">order one</a>.</p>
{% endif %}

<script>
function copy(el){ el.select(); document.execCommand('copy'); }
</script>
{% endblock %}