<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../../css/upuser.css" />
    <title>Update User</title>
  </head>
  <body>
    <script>
      function yesnoCheck(that) {
        if (that.value == "Other") {
          document.getElementById("ifYes").style.display = "block";
        } else {
          document.getElementById("ifYes").style.display = "none";
        }
      }
    </script>
    <nav class="navbar navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="/"><strong>US HOME</strong></a>
        <form class="d-flex" method="GET" action="/logout">
          <input class="form-control me-2" type="hidden" />
          <button class="btn btn-danger" type="submit">LOGOUT</button>
        </form>
      </div>
    </nav>
    <div class="container">
      <h1>USER ID: <%= id %></h1>
      <form
        action="/updateuser"
        method="POST"
        id="register_form"
        novalidate
        enctype="multipart/form-data"
      >
        <input type="hidden" id="id" name="id" value="<%= id %>" />
        <div>
          <label for="name">Name</label><br />
          <input
            class="form-control"
            type="text"
            name="name"
            id="name"
            placeholder="<%= name %>"
            value="<%= name %>"
            autofocus
            required
          />
        </div>

        <div>
          <label class="form-label" for="middlename">Middle Name</label><br />
          <input
            class="form-control"
            type="text"
            name="middlename"
            id="middlename"
            placeholder="<%= middlename %>"
            value="<%= middlename %>"
            required
          />
          <div class="valid-feedback">Looks Good!</div>
        </div>

        <div>
          <label for="surename">Surename</label><br />
          <input
            class="form-control"
            type="text"
            name="surename"
            id="surename"
            placeholder="<%= surename %>"
            value="<%= surename %>"
            required
          />
        </div>
        <div>
          <label for="affiliation">Affiliation</label><br />
          <select
            name="affiliation"
            id="affiliation"
            class="form-control"
            onchange="yesnoCheck(this);"
          >
            <% for(var i=0; i < affiliation.length; i++) { %>
            <option value="<%= affiliation[i]%>"><%= affiliation[i]%></option>
            <% } %>
          </select>
        </div>
        <div id="ifYes" style="display: none">
          <label for="aff_other">Other Affiliation?</label>
          <input
            type="text"
            id="aff_other"
            name="aff_other"
            class="form-control"
          />
        </div>
        <div>
          <label for="position">Position</label><br />
          <input
            class="form-control"
            type="text"
            name="position"
            id="position"
            placeholder="<%= position %>"
            value="<%= position %>"
            required
          />
        </div>
        <div>
          <label for="expertise">Expertise</label><br />
          <input
            class="form-control"
            type="text"
            name="expertise"
            id="expertise"
            placeholder="<%= expertise %>"
            value="<%= expertise %>"
            required
          />
        </div>
        <div>
          <label for="aff_url">Website (URL)</label><br />
          <input
            class="form-control"
            type="text"
            name="aff_url"
            id="aff_url"
            placeholder="<%= aff_url %>"
            value="<%= aff_url %>"
            required
          />
        </div>
        <div>
          <label for="email">Email</label><br />
          <input
            class="form-control"
            type="email"
            name="email"
            id="email"
            placeholder="<%= email %>"
            value="<%= email %>"
            required
          />
        </div>
        <div>
          <label for="image">Picture</label><br />
          <input
            class="form-control"
            type="file"
            name="image"
            id="image"
            placeholder="Select image"
            required
          />
        </div>
        <br />
        <div id="ckbx">
          <% if (active) { %>
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              name="active"
              id="flexSwitchCheckChecked"
              checked
            />
            <label class="form-check-label" for="flexSwitchCheckChecked"
              >Active</label
            >
          </div>
          <% } else { %>
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              name="active"
              id="flexSwitchCheckChecked"
            />
            <label class="form-check-label" for="flexSwitchCheckChecked"
              >Active</label
            >
          </div>
          <% } %> <% if (!admin) { %>
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              name="admin"
              id="flexSwitchCheckChecked"
            />
            <label class="form-check-label" for="flexSwitchCheckChecked"
              >Admin</label
            >
          </div>
          <% } else { %>
          <div class="form-check form-switch">
            <input
              class="form-check-input"
              type="checkbox"
              name="admin"
              id="flexSwitchCheckChecked"
              checked
            />
            <label class="form-check-label" for="flexSwitchCheckChecked"
              >Admin</label
            >
          </div>
          <% } %>
        </div>
        <br />
        <div id="btnc">
          <a class="btn btn-lg btn-danger" href="/user" type="button">CANCEL</a>
          <button type="submit" class="btn btn-lg btn-warning">UPDATE</button>
        </div>
      </form>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
