{{template "layout.html" .}}
<div class="card" style="max-width:520px">
  <div class="card-hd">{{.title}}</div>
  <div class="card-bd">
    <form id="userForm">
      {{if .user.ID}}<input type="hidden" name="id" value="{{.user.ID}}">{{end}}
      <div class="fg" style="text-align:center;padding-bottom:8px">
        <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:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--gray-100)">
            {{else}}
            <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:#fff;border:3px solid var(--gray-100)">{{substr .user.Username 0 1}}</div>
            {{end}}
            <div style="position:absolute;bottom:-2px;right:-2px;background:var(--primary);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:11px">📷</div>
          </div>
          <div style="font-size:11px;color:var(--gray-400);margin-top:4px">点击上传头像</div>
        </div>
      </div>
      <div class="fg">
        <label>用户名</label>
        <input type="text" name="username" class="fctrl" value="{{.user.Username}}"{{if .user.ID}} readonly style="background:var(--gray-50)"{{end}} required>
      </div>
      <div class="fg">
        <label>{{if .user.ID}}新密码（留空不修改）{{else}}密码{{end}}</label>
        <input type="password" name="password" class="fctrl"{{if not .user.ID}} required{{end}}>
      </div>
      <div class="fg">
        <label>昵称</label>
        <input type="text" name="nickname" class="fctrl" value="{{.user.Nickname}}">
      </div>
      <div class="fg">
        <label>邮箱</label>
        <input type="email" name="email" class="fctrl" value="{{.user.Email}}">
      </div>
      <div class="fg">
        <label>手机</label>
        <input type="text" name="phone" class="fctrl" value="{{.user.Phone}}">
      </div>
      <div class="fg">
        <label>角色</label>
        <select name="role_id" class="fctrl">
          {{range .roles}}<option value="{{.ID}}"{{if eq $.user.RoleID .ID}} selected{{end}}>{{.Name}}</option>{{end}}
        </select>
      </div>
      <div style="padding-top:6px">
        <button type="submit" class="btn btn-primary">保存</button>
        <a href="/admin/admin_user" class="btn btn-ghost">返回</a>
      </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:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--gray-100)"><div style="position:absolute;bottom:-2px;right:-2px;background:var(--primary);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:2px solid #fff;font-size:11px">📷</div>'}
          toast('上传成功','success');
        }else{toast(d.msg,'error')}
      });
  };i.click()
}
document.getElementById('userForm').addEventListener('submit',function(e){
  e.preventDefault();var btn=this.querySelector('button[type="submit"]');btn.disabled=true;btn.textContent='保存中…';
  var url='{{if .user.ID}}/admin/admin_user/update{{else}}/admin/admin_user/save{{end}}';
  fetch(url,{method:'POST',body:new FormData(this)})
    .then(function(r){return r.json()})
    .then(function(d){if(d.code===0){location.href='/admin/admin_user'}else{resultModal('❌','保存失败',d.msg);btn.disabled=false;btn.textContent='保存'}})
    .catch(function(){btn.disabled=false;btn.textContent='保存';resultModal('⚠️','请求失败','网络错误，请检查网络连接后重试')});
});
</script>

</body>
</html>