{{define "profile.html"}}{{template "layout" .}}{{end}}
{{define "content"}}
<div class="row">
  <div class="col-md-4 text-center mb-4">
    <img src="{{if .ProfileUser.Avatar}}{{.ProfileUser.Avatar}}{{else}}https://via.placeholder.com/128{{end}}" class="avatar-md mb-2" alt="avatar">
    <h4>{{.ProfileUser.Nickname}}</h4>
    <p class="text-muted">@{{.ProfileUser.Username}}</p>
    <form id="avatarForm" enctype="multipart/form-data">
      <input type="file" name="avatar" accept="image/*" class="form-control form-control-sm mb-2">
      <button type="submit" class="btn btn-outline-primary btn-sm">更换头像</button>
    </form>
  </div>
  <div class="col-md-8">
    <div class="card mb-3"><div class="card-header">修改昵称</div><div class="card-body">
      <form id="nickForm"><input type="text" name="nickname" class="form-control mb-2" value="{{.ProfileUser.Nickname}}">
      <button class="btn btn-success btn-sm">保存昵称</button></form>
    </div></div>
    <div class="card"><div class="card-header">修改密码</div><div class="card-body">
      <form id="pwdForm">
        <input type="password" name="old_password" class="form-control mb-2" placeholder="原密码" required>
        <input type="password" name="new_password" class="form-control mb-2" placeholder="新密码（至少6位）" required>
        <button class="btn btn-success btn-sm">修改密码</button>
      </form>
    </div></div>
  </div>
</div>
{{end}}
{{define "scripts"}}
<script>
document.getElementById('nickForm').addEventListener('submit',function(e){ e.preventDefault(); apiPost('/api/profile/nickname',this,true).then(d=>{ showToast(d.error||d.message,d.error?'danger':'success'); }); });
document.getElementById('pwdForm').addEventListener('submit',function(e){ e.preventDefault(); apiPost('/api/profile/password',this,true).then(d=>{ showToast(d.error||d.message,d.error?'danger':'success'); }); });
document.getElementById('avatarForm').addEventListener('submit',function(e){ e.preventDefault(); fetch('/api/profile/avatar',{method:'POST',credentials:'same-origin',body:new FormData(this)}).then(r=>r.json()).then(d=>{ if(d.error){showToast(d.error,'danger');return;} location.reload(); }); });
</script>
{{end}}