<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login - PKM</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
 <style>
    /* Phone */
    @media only screen and (max-width: 430px) {
      body{
        padding: 1rem;
        margin: 1rem;
      }
      .kembali 
      {
        position: relative; 
        display: grid; 
        grid-template-rows: 1, 1fr;
      }
      .kirim{
        position: relative;
        display: flex;
        justify-content: center;
      }
      .card {
        max-width: 100%;
      }
      .col-md-4,
      .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
      }
      .card img {
        width: 100%;
        height: auto;
      }
    }

    /* Tablet */
    @media only screen and (min-width: 321px) and (max-width: 768px) {
      .card {
        max-width: 80%;
      }
      .col-md-4,
      .col-md-8 {
        flex: 0 0 100%;
        max-width: 100%;
      }
      .card img {
        width: 100%;
        height: auto;
      }
    }

    /* Desktop */
    @media only screen and (min-width: 769px) {
      .card {
        max-width: 540px;
      }
      .kembali{
        position: relative;
        left: -5rem;
      }
    }
  </style>
<body>




  <!-- Login -->
  <div class="container text-center mt-5">
    <div class="row">
      <div class="col">
        <h2>Masuk Akun</h2>
      </div>
    </div>
  </div>

  <div class="card mb-3 mx-auto mt-5 border-0">
    <div class="row g-0">
      <div class="col-md-4">
        <img src="/assets/img/pkm.png" class="img-fluid rounded-start" alt="..." />
      </div>
      <div class="col-md-8">

        <form action="/user-login" method="post">

          <div class="mb-3">
            <label for="nomor_induk" class="form-label">NIM / NIDN</label>
            <input type="text" class="form-control" id="nomor_induk" name="nomor_induk" />
            <% if (error && error.nomor_induk) {%>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.nomor_induk %>
              </p>
            <%}%>
          </div>

          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" />
            <% if (error && error.password) {%>
              <p class="alert alert-danger mt-2" role="alert">
                <%= error.password %>
              </p>
              <%}%>
          </div>

          <div class="kirim">
            <button type="submit" class="btn btn-primary">Masuk</button>
          </div>
          <% if (locals.messages && messages.error) {%>
            <p class="alert alert-danger mt-2" role="alert">
              <%= messages.error %>
            </p>
            <%}%>

              <div class="container text-center">
                <div class="row">
                  <div class="col">
                    <div class="mb-3">
                      <p class="mt-5 kembali">
                        Apakah anda ketua? <a href="/register">Daftar</a>
                      </p>
                    </div>
                  </div>
                </div>
              </div>

        </form>
      </div>
    </div>
  </div>
  <!-- Login end -->




  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous"></script>
</body>

</html>