<%- contentFor('head') %>
<!-- Alpine, for animating the "forgot password" div -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<%- contentFor('main') %>
<div class="flex flex-col items-center max-w-sm"  x-data="{ forgotPassOpen: false }">
  <img class="w-12 mb-2" src="https://cdn.mutorials.org/images/icons/Icon_Main.svg">
  <h2 class="mb-2">Sign in to Mutorials</h2>
  <p class="mb-4">Don't have an account? <a href="/signup">Sign up</a></p>

  <form class="flex flex-col gap-4 w-full" action="/login" method="post" autocomplete="off" spellcheck="false">
    <div>
      <label class="font-medium" for="login-email">Username / Email address</label>
      <input
        type="text"
        id="login-email" name="username"
        autocomplete="username"
        required="true"
      >
    </div>
    <div>
      <label class="font-medium" for="password">Password</label>
      <input
        type="password"
        id="password"
        name="password"
        autocomplete="password"
        required="true"
      >
    </div>

    <div class="flex items-start gap-2">
      <div class="flex items-center">
        &#8203;
        <input type="checkbox" id="stayLoggedIn" name="stayLoggedIn">
      </div>
      <label for="stayLoggedIn">Keep me signed in</label><br>
    </div>
    <div>
      <p
        class="cursor-pointer"
        @keyup.enter="forgotPassOpen = !forgotPassOpen"
        @click="forgotPassOpen = !forgotPassOpen"
        tabindex="0"
      >
        <a>Forgot password?</a>
      </p>
    </div>

    <div>
      <input class="btn btn-primary w-full" type="submit" id="submitButton" value="Sign in">
    </div>
  </form>

  <div class="w-full mt-6" id="forgot-pass" x-cloak x-show="forgotPassOpen" x-transition
    <form action="/forgotPassword" method="post">
      <div class="mb-4">
        <label class="font-medium" for="forgot-email">Email</label>
        <input type="text" id="forgot-email" name="forgotEmail">
      </div>
      <div class="flex justify-between gap-2">
        <a class="btn btn-outline" @click="forgotPassOpen = !forgotPassOpen">Cancel</a>
        <input class="btn btn-primary" type="submit" value="Reset Password">
      </div>
    </form>
  </div>
</div>
