{{template "layout.html" .}}
<div class="card" style="max-width:500px">
  <div class="card-hd">👤 个人设置</div>
  <div class="card-bd">
    <form id="profileForm">
      <div class="fg" style="text-align:center;padding-bottom:12px">
        <div class="avatar-upload">
          <input type="hidden" name="avatar" id="avatarInput" value="{{.user.Avatar}}">
          <div id="avatarPreview" style="position:relative;display:inline-block;cursor:pointer" onclick="uploadAvatar()">
            {{if .user.Avatar}}
            <img src="{{.user.Avatar}}" style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--gray-100)">
            {{else}}
            <div style="width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;border:3px solid var(--gray-100)">{{substr .user.Username 0 1}}</div>
            {{end}}
            <div style="position:absolute;bottom:0;right:0;background:var(--primary);color:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:12px">📷</div>
          </div>
          <div style="font-size:12px;color:var(--gray-400);margin-top:6px">点击更换头像</div>
        </div>
      </div>
      <div class="fg">
        <label>用户名</label>
        <input type="text" class="fctrl" value="{{.user.Username}}" disabled style="background:var(--gray-50)">
      </div>
      <div class="fg">
        <label>昵称</label>
        <input type="text" name="nickname" class="fctrl" value="{{.user.Nickname}}" placeholder="设置显示名称">
      </div>
      <div class="fg">
        <label>邮箱</label>
        <input type="email" name="email" class="fctrl" value="{{.user.Email}}" placeholder="电子邮箱">
      </div>
      <div class="fg">
        <label>手机</label>
        <input type="text" name="phone" class="fctrl" value="{{.user.Phone}}" placeholder="手机号码">
      </div>
      <div class="fg" style="border-top:1px solid var(--gray-100);padding-top:16px;margin-top:8px">
        <label>旧密码</label>
        <input type="password" name="old_password" class="fctrl" placeholder="输入旧密码以确认修改">
      </div>
      <div class="fg">
        <label>新密码</label>
        <input type="password" name="new_password" class="fctrl" placeholder="留空则不修改密码">
      </div>
      <div style="padding-top:6px">
        <button type="submit" class="btn btn-primary" id="submitBtn">保存设置</button>
      </div>
    </form>
  </div>
</div>
<script>
function uploadAvatar(){
  var i=document.createElement('input');i.type='file';i.accept='image/*';
  i.onchange=function(){
    var f=new FormData();f.append('file',this.files[0]);
    fetch('/admin/upload',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){
        if(d.code===0){
          document.getElementById('avatarInput').value=d.data.url;
          var p=document.getElementById('avatarPreview');
          if(d.data.url){p.innerHTML='<img src="'+d.data.url+'" style="width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--gray-100)"><div style="position:absolute;bottom:0;right:0;background:var(--primary);color:#fff;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:12px">📷</div>'}
          toast('上传成功','success');
        }else{toast(d.msg,'error')}
      });
  };i.click()
}

document.getElementById('profileForm').addEventListener('submit',function(e){
  e.preventDefault();var btn=document.getElementById('submitBtn');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/profile/update',{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){
      btn.disabled=false;btn.textContent='保存设置';
      if(d.code===0){resultModal('✅','保存成功',d.msg);setTimeout(function(){location.reload()},1200)}
      else{resultModal('❌','保存失败',d.msg)}
    })
    .catch(function(){btn.disabled=false;btn.textContent='保存设置';resultModal('⚠️','请求失败','网络错误')});
});
</script>

<!-- 头像上传 + 下拉菜单交互 -->
<script>
document.addEventListener('DOMContentLoaded',function(){
  var toggle=document.getElementById('userToggle');
  var menu=document.getElementById('userMenu');
  if(toggle&&menu){
    toggle.addEventListener('click',function(e){
      e.stopPropagation();menu.classList.toggle('show');
    });
    document.addEventListener('click',function(){menu.classList.remove('show')});
    menu.addEventListener('click',function(e){e.stopPropagation()});
  }
});
</script>

</body>
</html>