{% extends './dev.html' %}

{% load static %}

{% block title %}
  Login | Devnoms
{% endblock %}

{% block style %}
  <link rel="stylesheet" href="{% static 'chat/css/login.css' %}" />
  <script src="{% static 'chat/js/login.js' %}" defer></script>
{% endblock %}

{% block content %}
  <div class="main_box">
    <div class="login-box">
      <div class="logo">
        <img src="https://pdf813.netlify.app/chat/img/logo.png" alt="DevNoms Logo" />
      </div>
      <h2>Welcome Back</h2>
      <form id="login-form" action="/login" method="POST">
        <!-- Email Field -->
        <div class="form-group">
          <label for="email">Email</label>
          <div class="input-group">
            <input type="text" name="email" id="email" placeholder="Enter your email" />
          </div>
          <div class="error-message" id="email-error"></div>
        </div>

        <!-- Password Field -->
        <div class="form-group">
          <label for="password">Password</label>
          <div class="input-group">
            <input type="password" name="password" id="password" placeholder="Enter your password" />
            <span id="toggle-password" class="eye-icon" onclick="togglePasswordVisibility()"><img src="https://pdf813.netlify.app/chat/img/icon/icons8-eye-48.png" alt="Toggle Password Visibility" /></span>
          </div>
          <div class="error-message" id="password-error"></div>
        </div>

        <!-- Remember Me -->
        <!--     <div class="remember-me">
              <input type="checkbox" name="remember" id="remember" />
              <label for="remember">Remember me</label>
          </div>     -->

        <!-- Login Button -->
        <div class="login-btn">
          <button type="submit" id="login-btn">Login</button>
        </div>

        <!-- Forgot Password Link -->
        <div class="forgot-password">
          <a href="/forgot-password">Forgot Password?</a>
        </div>

        <!-- Register Link -->
        <div class="register-link">
          <p>
            Don't have an account? <a href="/signup">Sign Up</a>
          </p>
        </div>
      </form>
    </div>
  </div>
{% endblock %}