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

{% block login_content %}

<div class="pt-2 pb-3">
  <h5 class="card-title text-center pb-0 fs-4 help"> {% trans "Sign in" %}</h5>  
</div>

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

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

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

  <div class="col-12 mb-3">
    <button class="btn btn-primary w-100" type="submit">{% trans "Next" %}</button>
  </div>                      
</form>



<div id="login-footer" class="d-flex justify-content-between align-items-center mt-4">
  <a href="{% url 'login:password_reset' %}" data-toggle="modal" data-target="#forgotPasswordModal">{% trans "Forgot your password?" %}</a>
  <div class="dropdown ms-auto">
      <form action="{% url 'set_language' %}" method="post">
        {% csrf_token %}
        <button class="btn btn-tertiary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
          {% get_current_language as LANGUAGE_CODE %}
          {% get_language_info_list for LANGUAGES as languages %}
          {{ LANGUAGE_CODE|get_language_code:languages }}
        </button>
        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="languageDropdown">
          {% for lang in languages %}
            <li>
              <button class="dropdown-item" type="submit" name="language" value="{{ lang.code }}">{{ lang.name_local }}</button>
            </li>
          {% endfor %}
        </ul>
      </form>
  </div>
</div>

{% endblock %}