{% extends 'base.html' %}{% load static %}
{% block title %}Edit Profile — Unity Nation{% endblock %}
{% block extra_css %}
.avatar-wrap{text-align:center;margin-bottom:26px}
.avatar-circle{width:90px;height:90px;border-radius:50%;background:linear-gradient(135deg,rgba(123,95,230,.35),rgba(0,200,168,.2));display:flex;align-items:center;justify-content:center;font-size:2.2rem;font-weight:700;color:var(--vlt);margin:0 auto 12px;border:3px solid rgba(123,95,230,.3);position:relative;overflow:hidden}
.avatar-circle img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:100px;padding:6px 14px;font-size:.76rem;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--tr)}
.avatar-btn:hover{background:rgba(255,255,255,.1);color:var(--white)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.form-row{grid-template-columns:1fr}}
.sec-hd{font-family:var(--ff);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:24px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.sec-hd i{color:var(--vlt)}
{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:620px;margin:0 auto">
<div class="pg-hd"><div class="ey">Account</div><h1>Edit Profile</h1><p>Update your personal information and account settings.</p></div>

<div class="card">
  <form method="post" action="{% url 'update_profile' %}" enctype="multipart/form-data">{% csrf_token %}

    <!-- Avatar -->
    <div class="avatar-wrap">
      <div class="avatar-circle">
        {% if user.profile_photo %}<img src="{{ user.profile_photo.url }}" alt="{{ user.username }}">{% else %}{{ user.username|first|upper }}{% endif %}
      </div>
      <label class="avatar-btn"><i class="fas fa-camera"></i>Change Photo<input type="file" name="profile_photo" style="display:none" accept="image/*" id="photoInp"></label>
      <div id="photoName" style="font-size:.74rem;color:var(--muted);margin-top:5px"></div>
    </div>

    <div class="sec-hd"><i class="fas fa-user"></i>Personal Information</div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Username</label><input type="text" name="username" class="form-control" value="{{ user.username }}" required></div>
      <div class="form-group"><label class="form-label">Full Name</label><input type="text" name="full_name" class="form-control" value="{{ user.full_name|default:'' }}"></div>
    </div>
    <div class="form-group"><label class="form-label">Email Address</label><input type="email" name="email" class="form-control" value="{{ user.email }}"></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">Phone Number</label><input type="text" name="phone_number" class="form-control" value="{{ user.phone_number|default:'' }}" placeholder="+1234567890"></div>
      <div class="form-group"><label class="form-label">Country</label><input type="text" name="country" class="form-control" value="{{ user.country|default:'' }}" placeholder="Your country"></div>
    </div>

    <div class="sec-hd"><i class="fas fa-wallet"></i>Wallet Settings</div>
    <div class="form-group">
      <label class="form-label">USDT Wallet Address (BEP20)</label>
      <input type="text" name="usdt_address" class="form-control" value="{{ user.usdt_address|default:'' }}" placeholder="0x... your BEP20 USDT address">
      <div class="form-help">This address will be used for withdrawals. Ensure it's a BEP20-compatible address.</div>
    </div>

    <div class="sec-hd"><i class="fas fa-lock"></i>Change Password <span style="font-weight:400;text-transform:none;letter-spacing:0;font-size:.74rem">(leave blank to keep current)</span></div>
    <div class="form-row">
      <div class="form-group"><label class="form-label">New Password</label><input type="password" name="new_password1" class="form-control" placeholder="New password" autocomplete="new-password"></div>
      <div class="form-group"><label class="form-label">Confirm New Password</label><input type="password" name="new_password2" class="form-control" placeholder="Repeat new password" autocomplete="new-password"></div>
    </div>

    <hr>
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
      <a href="{% url 'dashboard' %}" class="btn btn-ghost"><i class="fas fa-times"></i>Cancel</a>
      <button type="submit" class="btn btn-violet btn-lg"><i class="fas fa-save"></i>Save Changes</button>
    </div>
  </form>
</div>

<!-- Referral link section -->
<div style="background:rgba(123,95,230,.08);border:1px solid rgba(123,95,230,.22);border-radius:var(--r);padding:16px 18px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px">
  <div>
    <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--vlt);margin-bottom:3px">Your Referral Link</div>
    <div style="font-size:.8rem;color:var(--muted)">{{ request.scheme }}://{{ request.get_host }}/signup/?ref={{ user.username }}</div>
  </div>
  <button onclick="navigator.clipboard.writeText('{{ request.scheme }}://{{ request.get_host }}/signup/?ref={{ user.username }}');this.innerHTML='<i class=fas fa-check></i> Copied!';setTimeout(()=>this.innerHTML='<i class=fas fa-copy></i> Copy',2000)" class="btn btn-violet btn-sm"><i class="fas fa-copy"></i>Copy</button>
</div>
</div>
<script>
document.getElementById('photoInp')?.addEventListener('change',function(){
  const f=this.files[0];if(!f)return;
  document.getElementById('photoName').textContent=f.name;
  const r=new FileReader();r.onload=e=>{const ac=document.querySelector('.avatar-circle');let img=ac.querySelector('img');if(!img){img=document.createElement('img');ac.appendChild(img)}img.src=e.target.result};r.readAsDataURL(f);
});
</script>
{% endblock %}