<%- include('../partials/auth-head.ejs') %> <% if (error && error.length) { %>
<div
  class="
    myAlert-bottom
    alert alert-danger
    d-flex
    flex-row
    justify-content-between
    align-items-center
  "
>
  <div class="d-flex flex-row justify-content-between align-items-center">
    <svg
      class="bi flex-shrink-0 me-2 mr-3"
      width="24"
      height="24"
      role="img"
      aria-label="Danger:"
    >
      <use xlink:href="#exclamation-triangle-fill" />
    </svg>
    <%= error %>
  </div>
  <a href="#" class="close mb-1" data-dismiss="alert" aria-label="close"
    >&times;</a
  >
</div>
<% } else if (warning && warning.length) { %>
<div
  class="
    myAlert-bottom
    alert alert-warning
    d-flex
    flex-row
    justify-content-between
    align-items-center
  "
>
  <div class="d-flex flex-row justify-content-between align-items-center">
    <svg
      class="bi flex-shrink-0 me-2 mr-3"
      width="24"
      height="24"
      role="img"
      aria-label="Warning:"
    >
      <use xlink:href="#exclamation-triangle-fill" />
    </svg>
    <%= warning %>
  </div>
  <a href="#" class="close mb-1" data-dismiss="alert" aria-label="close"
    >&times;</a
  >
</div>
<% } %>

<button onclick="location.href='/' " class="btn1">
  <i class="fa fa-home"></i>
</button>

<div class="main d-flex flex-column justify-content-center align-items-center">
  <div class="form-cont row">
    <div class="reg col-6 d-flex flex-column">
      <img src="/images/toplogo.png" alt="logo" class="logo" />
      <div class="login-title text-center">Login</div>

      <form class="row" action="login" method="POST">
        <div class="col-12">
          <label class="form-label" for="email" name="email">Email</label>
          <input
            class="form-control"
            id="email"
            name="email"
            type="email"
            placeholder="devsharma@gmail.com"
            required
          />
        </div>
        <div class="col-12">
          <label class="form-label" for="pass" name="pass">Password</label>
          <input
            class="form-control"
            id="pass"
            name="pass"
            type="password"
            placeholder="Password"
            required
          />
        </div>
        <div class="col-12 mt-4">
          <button class="btn btn-primary">Login</button>
        </div>
      </form>
      <% if (userType === 'patient') { %>
      <div class="des mt-4 text-center">
        A new user?
        <a href="/patient/register">Register</a>
      </div>
      <% } %>
    </div>
    <div class="col-6 image-part"></div>
  </div>
</div>

<script>
  const form = document.querySelector(".reg");

  window.addEventListener("load", () => {
    if (window.innerWidth <= 1200) {
      form.classList.add("col-12");
      form.classList.remove("col-6");
      form.classList.add("align-items-center");
    } else {
      form.classList.add("col-6");
      form.classList.remove("col-12");
      form.classList.remove("align-items-center");
    }
  });

  window.addEventListener("resize", () => {
    if (window.innerWidth <= 1200) {
      form.classList.add("col-12");
      form.classList.remove("col-6");
      form.classList.add("align-items-center");
    } else {
      form.classList.add("col-6");
      form.classList.remove("col-12");
      form.classList.remove("align-items-center");
    }
  });
</script>

<%- include('../partials/foot.ejs') %>
