{% extends "base.html" %}

{% block menu %}
{% endblock %}

{% block content %}
{% 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{% if enable_js_nonce %} nonce="{{ nonce }}"{% endif %}>
  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') }}");
    {% if enable_js_nonce %} playerScript.setAttribute("nonce", "{{ nonce }}"); {% endif %}
    playerScript.setAttribute("async", "false");
    playerScript.onload = function() {
      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 class="align-items-center container d-flex justify-content-center" id="modulogin">
  <form method="post">
    <img alt="VVF" src="{{ urlsoftware }}/resources/images/logo.png" class="img-resposive"><br><br>
    <div class="form-group">
      <input type="text" name="name" placeholder="{{ 'username'|t|capitalize }}" required="" autocomplete="username" autofocus="" class="form-control">
    </div>
    <div class="form-group">
      <input type="password" name="password" placeholder="{{ 'password'|t|capitalize }}" required="" autocomplete="current-password" class="form-control">
    </div>
    {% if option('force_remember_cookie') %}
    <input type="hidden" name="remember_me" value='1' id="remember_me checkbox1" type="checkbox">
    {% else %}
    <div class="form-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="remember_me" value="1" id="remember_me checkbox1">
        <label class="form-check-label" for="checkbox1">{{ 'Stay connected'|t }}</label>
      </div>
    </div>
    {% endif %}
    <input type="submit" name="login" class="btn btn-block btn-lg btn-success" value="{{ 'Login'|t }}">
  </form>
</div>
<br><br>

{% block footer %}
{% endblock %}

{% endblock %}