{{set . "title" "Log In"}}
{{template "header.html" .}}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;

  }

  .login-container {
    width: 350px;
    background-color: #f8f9fa;

    border: 1px solid #007bff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  }



  .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
  }

  .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
  }

  .text-primary {
    color: #007bff;
    /* warna teks utama */
  }

  .error {
    border-color: red !important;
  }
</style>

<script>

  function toggleEye() {
    var newPassInput = document.getElementById("password");
    if (newPassInput.type == 'password') {
      newPassInput.type = 'text';
      this.innerHTML = '<i class="bi bi-eye"></i>';
    } else {
      newPassInput.type = 'password';
      this.innerHTML = '<i class="bi bi-eye-slash"></i>';
    }
  }
  function checkCredentials() {
    var usernameInput = document.getElementById("username");
    var passwordInput = document.getElementById("password");

    var username = usernameInput.value;
    var password = passwordInput.value;

    if (username === "" || password === "") {
      alert("Silakan lengkapi username dan password");
      return false;
    }

    if (username == "{{.Admin.Username}}" && password == "{{.Admin.Password}}") {

      window.location.href = "/mahasiswa/show";
      return false;
    } else {
      usernameInput.classList.add('error');
      passwordInput.classList.add('error');
      alert("Username atau password salah");

      usernameInput.value = "";
      passwordInput.value = "";
      return false;
    }
  }

  document.getElementById("username").addEventListener("input", function () {
    this.classList.remove('error');
  });
  document.getElementById("password").addEventListener("input", function () {
    this.classList.remove('error');
  });
</script>


<div class="login-container">
  <h2 class="mb-4 text-primary">Login</h2>
  <form id="loginForm" onsubmit="return checkCredentials()">
    <div class="form-group">
      <label for="username" class="text-primary">Username: </label>
      <input type="text" class="form-control" id="username" placeholder="Enter username">
    </div>
    <div class="form-group">
      <label for="newpass" class="text-primary">Password: </label>
      <div class="input-group">
          <input type="password" class="form-control" id="password" name="password">

          <button class="btn btn-outline-secondary" onclick="toggleEye()"  type="button" id="toggleNewPass">
              <i class="bi bi-eye-slash"></i>
          </button>

      </div>
  </div>
    <button type="submit" class="btn btn-primary btn-block">Submit</button>
  </form>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
{{template "footer.html" .}}