{% extends "base.html" %} {% block title %}Login{% endblock %} {% block content
%}
<div
  class="container"
  style="margin-top: calc(var(--navbar-height) + 2rem); max-width: 500px"
>
  <div class="search-container">
    <h1 class="page-title" style="margin-bottom: 1rem">Welcome Back</h1>

    <form action="/login" method="POST" class="search-form" style="gap: 1.5rem">
      <!-- Username Field -->
      <div class="search-field" style="position: relative">
        <i
          class="fas fa-user"
          style="
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--primary-color);
            font-size: 1rem;
          "
        ></i>
        <input
          type="text"
          name="username"
          placeholder="Username"
          required
          style="
            width: 100%;
            padding: 12px 15px 12px 40px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            background: white;
            color: var(--text-color);
          "
        />
      </div>

      <!-- Password Field -->
      <div class="password-wrapper">
        <i class="fas fa-lock"></i>
        <input
          type="password"
          name="password"
          id="reg-password-field"
          placeholder="Password"
          required
        />
        <i
          class="fa-solid fa-eye-slash toggle-password"
          id="toggle-reg-password"
        ></i>
      </div>

      <!-- Submit -->
      <button type="submit" class="search-btn" style="width: 100%">
        Login
      </button>
    </form>

    <!-- Link to Register -->
    <p style="text-align: center; margin-top: 1rem; color: var(--text-light)">
      Don’t have an account?
      <a
        href="{{ url_for('register') }}"
        style="color: var(--primary-color); font-weight: 600"
        >Register</a
      >
    </p>
  </div>
</div>

<script>
  const togglePassword = document.getElementById("toggle-reg-password");
  const passwordField = document.getElementById("reg-password-field");

  togglePassword.addEventListener("click", function () {
    const isPassword = passwordField.type === "password";
    passwordField.type = isPassword ? "text" : "password";
    this.classList.toggle("fa-eye-slash");
    this.classList.toggle("fa-eye");
  });
</script>
{% endblock %}