<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('My Profile')}"></head>
<body>
<nav th:replace="~{fragments/layout :: adminbar}"></nav>

<section>
    <div class="container">
        <div class="page-header"><h1>My Profile</h1></div>

        <div class="settings-grid">
            <!-- Identity card -->
            <div class="form-card" style="margin:0">
                <div style="display:flex;align-items:center;gap:16px;margin-bottom:18px">
                    <span class="avatar lg" style="width:64px;height:64px;font-size:22px"
                          th:text="${cu != null ? cu.initials : 'AD'}">AD</span>
                    <div>
                        <h2 style="margin:0;font-size:20px" th:text="${user.fullName}">Name</h2>
                        <span class="ud-role" th:text="${user.role}">ADMIN</span>
                    </div>
                </div>
                <table>
                    <tbody>
                    <tr><td><strong>Username</strong></td><td th:text="${user.username}">admin</td></tr>
                    <tr><td><strong>Email</strong></td><td th:text="${user.email}">email</td></tr>
                    <tr><td><strong>Phone</strong></td><td th:text="${user.phone} ?: '—'">—</td></tr>
                    <tr><td><strong>Role</strong></td><td th:text="${user.role}">ADMIN</td></tr>
                    <tr><td><strong>Permissions</strong></td><td th:text="${#sets.isEmpty(user.permissions) ? '—' : #strings.listJoin(user.permissions, ', ')}">—</td></tr>
                    </tbody>
                </table>
            </div>

            <!-- Change password -->
            <div class="form-card" style="margin:0">
                <h2 style="font-size:18px">Change Password</h2>
                <p class="subtitle">Use a strong password of at least 6 characters</p>
                <form id="pwForm" onsubmit="return false">
                    <div class="form-group field"><label>Current Password</label>
                        <input type="password" id="p_current"/></div>
                    <div class="form-group field"><label>New Password</label>
                        <input type="password" id="p_new" minlength="6"/></div>
                    <div class="form-group field"><label>Confirm New Password</label>
                        <input type="password" id="p_confirm" minlength="6"/></div>
                    <button class="btn btn-primary" id="pwBtn" type="button" onclick="changePw()" style="width:100%">Update Password</button>
                </form>
            </div>
        </div>
    </div>
</section>

<div class="toast-wrap" id="toasts"></div>

<script th:inline="javascript">
/*<![CDATA[*/
const CSRF_TOKEN  = /*[[${_csrf.token}]]*/ '';
const CSRF_HEADER = /*[[${_csrf.headerName}]]*/ 'X-CSRF-TOKEN';
/*]]>*/
</script>
<script>
function changePw(){
  const cur=document.getElementById('p_current').value;
  const nw=document.getElementById('p_new').value;
  const cf=document.getElementById('p_confirm').value;
  if(nw.length<6){ toast('New password must be at least 6 characters','err'); return; }
  if(nw!==cf){ toast('New passwords do not match','err'); return; }
  const btn=document.getElementById('pwBtn'); btn.disabled=true; btn.textContent='Updating…';
  const headers={'Content-Type':'application/json'}; headers[CSRF_HEADER]=CSRF_TOKEN;
  fetch('/admin/api/profile/password',{method:'POST',headers,body:JSON.stringify({currentPassword:cur,newPassword:nw})})
    .then(async r=>({ok:r.ok,body:await r.json()}))
    .then(res=>{ if(res.ok&&res.body.ok){ document.getElementById('pwForm').reset(); toast('Password updated','ok'); }
      else toast(res.body.message||'Could not update','err'); })
    .catch(()=>toast('Network error','err'))
    .finally(()=>{ btn.disabled=false; btn.textContent='Update Password'; });
}
function toast(msg,kind){ const t=document.createElement('div'); t.className='toast '+(kind||'ok'); t.textContent=msg;
  document.getElementById('toasts').appendChild(t);
  setTimeout(()=>{t.style.opacity='0';t.style.transition='opacity .3s';setTimeout(()=>t.remove(),300);},2600); }
</script>

<footer th:replace="~{fragments/layout :: footer}"></footer>
</body>
</html>
