{% extends "ereuse_devicehub/base.html" %}

{% block page_title %}Login{% endblock %}

{% block body %}
<main>
  <div class="container">

    <section class="section register min-vh-100 d-flex flex-column align-items-center justify-content-center py-4">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-4 col-md-6 d-flex flex-column align-items-center justify-content-center">

            <div class="d-flex justify-content-center py-4">
              <a href="{{ url_for('core.login') }}" class="d-flex align-items-center w-auto">
                <img src="{{ url_for('static', filename='img/usody_logo_transparent_noicon-y-purple-120x41.png') }}" alt="">
              </a>
            </div><!-- End Logo -->

            <div class="card mb-3">

              <div class="card-body">

                <div class="pt-2 pb-3">
                  <h5 class="card-title text-center pb-0 fs-4 help">Sign in</h5>
                  {% if form.form_errors %}
                  <p class="text-danger">
                    {% for error in form.form_errors %}
                      {{ error }}<br/>
                    {% endfor %}
                  </p>
                  {% endif %}
                </div>

                <form method="post" class="row g-3 needs-validation" novalidate>
                  {{ form.csrf_token }}

                  <div class="col-12">
                    <input type="email" placeholder="Email" name="email" class="form-control" id="yourEmail" required value="{{ form.email.data|default('', true) }}">
                    <div class="invalid-feedback">Please enter your email.</div>
                  </div>

                  <div class="col-12">
                    <div class="input-group">
                    <input type="password" placeholder="Password" name="password" class="form-control" id="id_password" required>
                    <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>

                  <!-- TODO(@slamora): hidde until it is implemented
                  <div class="col-12">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="remember" {% if form.remember.data %}checked{% endif %} id="rememberMe">
                      <label class="form-check-label" for="rememberMe">Remember me</label>
                    </div>
                  </div>
                  -->
                  <div class="col-12">
                    <button class="btn btn-primary w-100" type="submit">Next</button>
                  </div>
                  <div class="col-12">
                    <p class="small mb-0">Don't have account? <a href="{{ url_register }}">Create an account</a></p>
                    <p class="small mb-0">Forgot password? <a href="{{ url_reset_password }}">Reset your password</a></p>
                  </div>
                </form>

              </div>
            </div>

            <div class="credits">
              <a href="https://help.usody.com/en/getting-started/login-usody/" target="_blank">Help</a> | 
              <a href="https://pangea.org/es/politica-de-privacidad/" target="_blank">Privacy</a> | 
              <a href="https://pangea.org/aviso-legal/" target="_blank">Terms</a>
            </div>

          </div>
        </div>
      </div>

    </section>

  </div>
</main><!-- End #main -->

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Do you want to try USOdy tools?</h5>
      </div>
      <div class="modal-body">
        Just write an email to <a href="mali:hello@usody.com">hello@usody.com</a>
      </div>
    </div>
  </div>
</div> <!-- End register modal -->
<script>
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#id_password');

togglePassword.addEventListener('click', function (e) {
    // toggle the type attribute
    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
    // toggle the eye slash icon
    if(type == "password"){
    this.classList.remove('bi-eye-slash');
    this.classList.add('bi-eye');
    } else if(type == "text"){
    this.classList.remove('bi-eye');
    this.classList.add('bi-eye-slash');
    }
    password.setAttribute('type', type);
});
</script>
{% endblock body %}
