<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="loginModalCloseBtn">
          <span aria-hidden="true">×</span>
        </button>
      </div>

      <div class="modal-body">
        <div class="form-title text-center mb-4">
          <h4>Login</h4>
        </div>

        <form method="post" action="account/login/">
          {% csrf_token %}
          <!-- Email input -->
          <div class="form-floating mb-4">
            <label class="form-label" for="formLoginEmail">Email</label>
            <input type="email" name="email" id="formLoginEmail" class="form-control" />
          </div>

          <!-- Password input -->
          <div class="form-outline mb-4">
            <label class="form-label" for="form2Example2">Password</label>
            <input type="password" name="password" id="form2Example2" class="form-control" />
          </div>

          <div class="row mb-4">
            <div class="col d-flex justify-content-center">
              <!-- Checkbox -->
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="form2Example31" checked />
                <label class="form-check-label" for="form2Example31"> Remember me </label>
              </div>
            </div>

            <div class="col">
              <a href="{% url 'account:request_password_reset' %}">Forgot password?</a>
            </div>
          </div>

          <!-- Submit button -->
          <button type="submit" class="btn btn-primary btn-block mb-4">Sign in</button>

          <!-- Register buttons -->
          <div class="text-center">
            <p>Not a member? <a href="#!" id="signupLink" data-toggle="modal" data-target="#registerModal">Register</a>
            </p>
            </button>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>

</div>

<script>
  document.getElementById('signupLink').addEventListener('click', function () {
    // Hide the "Sign In" modal
    $('#loginModal').modal('hide');
  });
</script>