{% extends "login_base.html" %}
{% load i18n static %}

{% block login_content %}
<form action="{% url 'login:login' %}" method="post" class="row g-3 needs-validation" novalidate>
  {% csrf_token %}
  <div class="col-12">
    <input type="email" name="username" maxlength="100" autocapitalize="off"
        autocorrect="off" class="form-control textinput textInput" id="yourEmail" required
        autofocus placeholder="{{ form.username.label }}"
        {% if form.username.value %}value="{{ form.username.value }}" {% endif %}>
    <div class="invalid-feedback">Please enter your email.</div>
    {% if form.username.errors %}
    <p class="text-error">
        {{ form.username.errors|striptags }}
    </p>
    {% endif %}
  </div>

  <div class="col-12">
    <div class="input-group">
    <input type="password" name="password" maxlength="100" autocapitalize="off"
        autocorrect="off" class="form-control textinput textInput" id="id_password"
        placeholder="{{ form.password.label }}" required>
    {% if form.password.errors %}
    <p class="text-error">
        {{ form.password.errors|striptags }}
    </p>
    {% endif %}
    <i class="input-group-text bi bi-eye" id="togglePassword" style="cursor: pointer">
    </i>
    </div>
    <div class="invalid-feedback">Please enter your password!</div>
  </div>

  <input name="next" type="hidden" value="{{ success_url }}">

  <div class="col-12">
    <button class="btn btn-primary w-100" type="submit">Next</button>
  </div>
</form>
<div id="login-footer" class="mt-3">
    <a href="{% url 'login:password_reset' %}" data-toggle="modal" data-target="#forgotPasswordModal">{% trans "Forgot your password? Click here to recover" %}</a>
</div>
{% endblock %}