{% extends 'base.html' %}{% load static %}
{% block title %}Transfer — 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;left:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(123,95,230,.18),transparent 70%);pointer-events:none}
.bal-box{background:linear-gradient(135deg,rgba(123,95,230,.1),rgba(123,95,230,.04));border:1px solid rgba(123,95,230,.22);border-radius:11px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.info-note{background:rgba(245,200,66,.07);border:1px solid rgba(245,200,66,.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(--gold);flex-shrink:0;margin-top:1px}
{% 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(123,95,230,.18);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--vlt)"><i class="fas fa-exchange-alt"></i></div>
    <div>
      <h1 style="font-family:var(--ff);font-size:1.45rem;font-weight:700;letter-spacing:-.02em">Transfer Funds</h1>
      <p style="color:var(--muted);font-size:.84rem">Send balance to another member</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(--vlt)">${{ user.wallet_balance|floatformat:2 }}</div>
    </div>
    <div style="width:44px;height:44px;border-radius:50%;background:rgba(123,95,230,.15);display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--vlt)"><i class="fas fa-user"></i></div>
  </div>

  <form method="post" action="{% url 'transfer' %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label"><i class="fas fa-user" style="color:var(--vlt);margin-right:5px"></i>Recipient Username</label>
      <input type="text" name="recipient_username" class="form-control" placeholder="Enter their username" required autocomplete="off">
    </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>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-pen" style="color:var(--muted);margin-right:5px"></i>Note (optional)</label>
      <input type="text" name="notes" class="form-control" placeholder="What's this transfer for?">
    </div>
    <button type="submit" class="btn btn-violet btn-block" style="padding:13px;font-size:.92rem">
      <i class="fas fa-paper-plane"></i>Send Transfer
    </button>
  </form>

  <div class="info-note"><i class="fas fa-exclamation-triangle"></i><span>Double-check the recipient username before sending. Transfers are instant and cannot be reversed.</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 %}