{% extends 'base.html' %}

{% block content %}
<section class="login-section">

    {% load static %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <img id="icon" style="height: 250px; width: 250px; margin-right: 200px;mix-blend-mode: multiply;border-radius: 30px;   transition: transform 0.3s ease; /* Smooth animation */"
        src="{% static 'accounts/logo.png' %}" alt="My image">
    <link rel="stylesheet" href="{% static 'accounts/style.css' %}">
    <div class="label" style="margin-right: 200px;">
        <h1><b>Tutor-Ai</b></h1>
        <h4>NLP based toolkit for every tutor.</h4>
        <h6><i>A production ready SaaS.</i></h6>
    </div>

    <form method="post" class="login-form">
        <h2>Login</h2>
        {% csrf_token %}
        <div class="form-group">
            {{ form.username.label_tag }}
            {{ form.username }}
            <div class="form-error">{{ form.username.errors }}</div>
        </div>
        <div class="form-group">
            {{ form.password.label_tag }}
            {{ form.password }}
            <div class="form-error">{{ form.password.errors }}</div>
        </div>

        <button type="submit" class="btn-login">Login</button>
        <a href="{% url 'accounts:register' %}" class="not-registered">Not Registered?</a>

        <a style="display: inline-block; padding: 10px 20px; margin-left: 23%; margin-top: 5%; background-color: #000000; color: #ffffff; text-decoration: none; font-weight: bold; font-size: 16px; border-radius: 5px;" href="{% url 'accounts:password_reset' %}" class="forgot-password">Forgot Password?</a>

        <!-- Display form non-field errors (e.g., the 'Invalid username or password.' error) -->
        <div class="form-error">{{ form.non_field_errors }}</div>
    </form>
</section>

<script>
    $(document).ready(function () {
        $('.login-form').css('opacity', '0').animate({ opacity: '1' }, 300);
    });
     // Function to trigger hover effect after a delay
  function triggerHover() {
    setTimeout(function() {
      // Add 'hover' class to the icon
      document.getElementById('icon').classList.add('hover');
    }, 200); // 3000 milliseconds = 3 seconds
  }

  // Call the function to trigger hover effect
  triggerHover();
</script>

<style>

  /* CSS for hover effect */
  #icon.hover {
    /* Define the styles for the hover effect */
    /* For example, change the transform property */
    transform: scale(1.9); /* Example: increase the size of the icon */
  }
</style>
{% endblock %}