{% 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>

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