<!DOCTYPE html>
<html lang="en">
  <head>
    <title>OnlineAMS</title>
    <%- include('./partials/_head'); %>
  </head>
  
  <div class="overlay2"></div>
  <div class="overlay"></div>
  <body class="bg-light bgImg">
    
    <div class="whole">
    <div class="container">
      <% if (messages.error){ %>
     <div class="alert alert-danger alert-dismissable text-center mt-0">
       <span><%= messages.error %></span>
       <button type="button" class="close" data-dismiss="alert" >&times;</button>
      </div>
        <% } %>
  
      <form action="/authentication" method="POST" class="needs-validation" novalidate>
        <h3 class="display-4 text-light"><%= title%></h3>
        <hr style="margin-top: -10px;">
        <div class="form-group">
          <label for="username" class="text-light" >Username:</label>
          <input type="text" name="username" id="uname" class="form-control" placeholder="Username..." required value="<%=  %>">
          <div class="valid-feedback">OK</div>          
          <div class="invalid-feedback">Please Insert your UserName</div>
        </div>
        
        <div class="form-group">
          <label for="pwd" class="text-light">Password:</label>
          <input type="password" name="password" id="pwd" class="form-control" placeholder="Reg Number/ Admin number..." required>
          <div onmouseover="togglePasswordVisibility()" onmouseout="togglePasswordVisibility()">
          <a class="text-light"><small id="passSub">Show Password: </small><i class="fa fa-eye" aria-hidden="true"></i></a></div>
          <div class="valid-feedback">OK</div>          
          <div class="invalid-feedback">Please Insert Password</div>

        </div>
        <button type="submit" class="btn btn-md btn-dark btn-block">LOGIN</button>
        
      </form>
    </div>
    </div>

    <script>

      function togglePasswordVisibility() {
        let passField = document.getElementById("pwd");
        let passSub = document.getElementById("passSub");

        if(passField.type === "password"){ 
          passField.type = "text"; passSub.innerHTML = "Hide password: ";
        }else { passField.type = "password"; passSub.innerHTML = "Show password: "; }
        return 
      }

      // Disable form submissions if there are invalid fields
      (function() {
        'use strict';
        window.addEventListener('load', function() {
          // Get the forms we want to add validation styles to
          var forms = document.getElementsByClassName('needs-validation');
          // Loop over them and prevent submission
          var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
              if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
              }
              form.classList.add('was-validated');
            }, false);
          });
        }, false);
      })();
      </script>
<footer><%- include('./partials/_foot'); %></footer>
  </body>
</html>