{% extends 'base.html' %}{% load static %}
{% block title %}Withdraw — Unity Nation{% endblock %}
{% block extra_css %}
.fin-page{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:40px 20px}
.fin-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:40px 36px;width:100%;max-width:480px;box-shadow:0 32px 80px rgba(0,0,0,.5);animation:fadeUp .4s ease;position:relative;overflow:hidden}
.fin-card::before{content:'';position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(0,200,168,.18),transparent 70%);pointer-events:none}
.bal-box{background:linear-gradient(135deg,rgba(0,200,168,.1),rgba(0,200,168,.04));border:1px solid rgba(0,200,168,.22);border-radius:11px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.info-note{background:rgba(123,95,230,.07);border:1px solid rgba(123,95,230,.2);border-radius:9px;padding:11px 14px;font-size:.79rem;color:var(--muted);margin-top:14px;display:flex;align-items:flex-start;gap:8px;line-height:1.55}
.info-note i{color:var(--vlt);flex-shrink:0;margin-top:1px}
.step-row{display:flex;gap:12px;margin-bottom:20px}
.step-n{width:26px;height:26px;border-radius:50%;background:rgba(123,95,230,.2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--vlt);flex-shrink:0;margin-top:1px}
.step-txt{font-size:.84rem;color:var(--muted);line-height:1.55}
{% endblock %}
{% block content %}
<div class="fin-page">
<div class="fin-card">
  <div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">
    <div style="width:44px;height:44px;border-radius:12px;background:rgba(0,200,168,.15);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--teal)"><i class="fas fa-arrow-up"></i></div>
    <div>
      <h1 style="font-family:var(--ff);font-size:1.45rem;font-weight:700;letter-spacing:-.02em">Withdraw Funds</h1>
      <p style="color:var(--muted);font-size:.84rem">Transfer to your USDT wallet</p>
    </div>
  </div>
  <hr style="margin:18px 0">
  <div class="bal-box">
    <div>
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px">Available Balance</div>
      <div style="font-family:var(--ff);font-size:1.8rem;font-weight:800;color:var(--teal)">${{ user.wallet_balance|floatformat:2 }}</div>
    </div>
    <div style="text-align:right">
      <div style="font-size:.72rem;color:var(--muted);margin-bottom:3px">Total Withdrawn</div>
      <div style="font-family:var(--ff);font-size:1rem;font-weight:700;color:var(--muted)">${{ user.total_withdrawal|floatformat:2 }}</div>
    </div>
  </div>

  <form method="post" action="{% url 'withdraw' %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label"><i class="fas fa-wallet" style="color:var(--vlt);margin-right:5px"></i>USDT Wallet Address (BEP20)</label>
      <input type="text" name="wallet_address" class="form-control" placeholder="0x..." required>
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-dollar-sign" style="color:var(--teal);margin-right:5px"></i>Amount (USD)</label>
      <input type="number" name="amount" class="form-control" placeholder="Enter amount" step="0.01" min="0.01" max="{{ user.wallet_balance }}" required>
    </div>
    <button type="submit" class="btn btn-teal btn-block" style="padding:13px;font-size:.92rem">
      <i class="fas fa-paper-plane"></i>Submit Withdrawal
    </button>
  </form>

  <div class="info-note"><i class="fas fa-shield-alt"></i><span>Ensure your BEP20 address is correct. Funds sent to wrong addresses cannot be recovered. Processing may take up to 24 hours.</span></div>

  <div style="margin-top:18px;text-align:center"><a href="{% url 'dashboard' %}" style="color:var(--muted);font-size:.82rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>Back to Dashboard</a></div>
</div>
</div>
{% endblock %}