<div class="w3-content" style="max-width:400px;margin-top:8vh">

  <h2 style="margin-bottom:3vh">Account: ${user | h}</h2>

  <div>
    <button onclick="btntogglenhide(this, 'Close','New user password', 'userpwdchange', 'pwdconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">New user password</button>
  </div>

  <div id="userpwdchange" class="w3-container w3-card" style="margin-top:5vh; display:none">
    <p>Set password for user: ${user | h}</p>
    <form hx-post="/edit/changeuserpwd" hx-target="#pwdconfirm" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
      <p><label for="password1">New Password:</label>
        <input class="w3-input" type="password" id="password1" name="password1" required /></p>
      <p><label for="password2">New Password again:</label>
        <input class="w3-input" type="password" id="password2" name="password2" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
      <input type="hidden" name="username" value="${user | h}" />
    </form>
    <p id="pwdconfirm"></p>
  </div>

</div>


<div class="w3-content" style="max-width:400px;margin-top:5vh">

  <div>
    <button onclick="btntogglenhide(this, 'Close','Set user full name', 'fullnamechange', 'nameconfirm')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Set user full name</button>
  </div>

  <div id="fullnamechange" class="w3-container w3-card" style="margin-top:5vh; display:none">
    <p>Set a new full name for: ${user | h}</p>
    <form hx-post="/edit/userfullname" hx-target="#nameconfirm" hx-swap="outerHTML">
      <p><label for="fullname">Users full name:</label>
        <input class="w3-input" type="text" id="fullname" name="fullname" value="${fullname | h}" required /></p>
      <p class="w3-center">
        <button class="w3-button w3-black w3-ripple w3-round" type="submit">Submit</button></p>
      <input type="hidden" name="username" value="${user | h}" />
    </form>
    <p id="nameconfirm"></p>
  </div>

</div>


<div class="w3-content" style="max-width:400px;margin-top:5vh">



  <div>
    <button onclick="btntogglenhide(this, 'Do not delete the account', 'Delete this account', 'deleteacc', 'delresult')" class="w3-button w3-black w3-ripple w3-round" style="width:100%">Delete this account</button>
  </div>

  <div id="deleteacc" class="w3-center" style="margin-top:5vh; display:none">
    <p>This deletes the ${user | h} account. Are you sure you want to do this?</p>
    <p><button hx-post="/edit/userdelete" hx-vals='{"username": "${user | h}"}' hx-target="#delresult" class="w3-button w3-black w3-ripple w3-round">Yes, Please delete this account</button></p>
    <p id="delresult" class="w3-red"></p>
  </div>

</div>
