{% extends "base.html" %}

{% block menu %}
{% endblock %}

{% block content %}
<div class="container text-center" id="modulogin">
  <form method="post">
    <img alt="VVF" src="{{ urlsoftware }}/resources/images/logo.png" class="img-resposive"><br><br><br>
    <input type="text" name="name" placeholder="{{ 'username'|t }}" required autocomplete="username" autofocus><br><br>
    <input type="password" name="password" placeholder="{{ 'password'|t }}" required
      autocomplete="current-password"><br><br>
    {% if option('force_remember_cookie') %}
    <input type="hidden" name="remember_me" value='1' id="remember_me checkbox1" type="checkbox">
    {% else %}
    <div>
      <div class="form-check">
        <input type="checkbox" name="remember_me" value='1' id="remember_me checkbox1" type="checkbox">
        <label for="checkbox1">{{ 'Stay connected'|t }}</label>
      </div>
    </div>
    {% endif %}
    <input type="submit" name="login" class="btn btn-lg btn-success" value="{{ 'Login'|t }}">
  </form>
  {% if error %}
  <div id="err" class="alert alert-danger m-3" role="alert">
    <h4 class="alert-heading">{{ error.text|t }}</h4>
    <p>{{ 'Error'|t}} {{ 'code'|t}} {{ error.code }}. {{ 'Check the entered credentials and make sure they are correct'|t }}.</p>
    <img src='{{ urlsoftware }}/resources/images/{{ error_image }}'></img>
  </div>
  <script>
    const noSaveData = 'connection' in navigator === false || ('connection' in navigator && !navigator.connection.saveData);
    if (noSaveData) {
      let playerScript = document.createElement("script");
      playerScript.setAttribute("src", "{{ urlsoftware }}/resources/dist/{{ resource('players.js') }}");
      playerScript.setAttribute("async", "false");
      playerScript.onload = () => {
        console.log("player script loaded");
        var sound = new Howl({
          src: ['{{ urlsoftware }}/resources/sounds/{{ error_sound }}'],
          autoplay: true
        });
        sound.play();
      };
      document.head.insertBefore(playerScript, document.head.firstElementChild);
    }
    $("#err").delay(20000).fadeOut(300);
  </script>
  {% endif %}
</div>

{% block footer %}
{% endblock %}

{% endblock %}