{% extends 'security-layout.html.twig' %}
{% block title %}
    INSTALL BOIS - Connexion
{% endblock %}

{% block head %}
    <script type="text/javascript" src="{{ asset('externalJS/jquery.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('externalJS/jquery-ui.min.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script src="{{ asset('bundles/adminlte/adminlte.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('install-bois/css/application.css') ~ "?rnd=" ~ random() }}">
    <link rel="stylesheet" href="{{ asset('install-bois/css/main.css') }}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
    <link rel="stylesheet" href="{{ asset('externalCSS/toastr.min.css') }}">
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.png') }}"/>
    <style>
        #toast-container {
            top: 10px !important;
        }
    </style>
{% endblock %}


{% block logo_login %}
    <img src="{{ asset("images/logo-header.png") }}" style="width: 270px;" alt="Logo Install Bois -premiere
    application pour revendeurs et installateurs de poêles et d'inserts qui les aide à concevoir et mettre en oeuvre
    leurs installations, et qui valorise leur travail auprès de leurs clients." title="Logo Install Bois"/>
{% endblock %}

{% block login_box_msg %}
    {% if app.environment !== 'info' %}
        {{ 'LOGIN.TITLE1'|trans({}) }}
        <br>
        {{ 'LOGIN.TITLE2'|trans({}) }}
        {% else %}
        <h3 style="font-weight: bold; color: #EC9437">Connexion à votre <br>espace de démonstration</h3>
    {% endif %}
{% endblock %}

{% block login_box_icon %}{% endblock %}
  {% block login_box_error %}
      {% if error|default(false) %}
          {% if error.messageKey == 'Invalid credentials.' %}
              {% set errorMessage = "Vos identifiants sont incorrects" %}
          {% elseif error.messageKey == 'Invalid CSRF token.' %}
              {% set errorMessage = 'Délai dépassé - veuillez actualiser la page' %}
          {% else %}
              {% set errorMessage = error.messageKey|trans(error.messageData, 'security') %}
          {% endif %}
          <div style="margin-bottom: 4%;" class="alert alert-danger">{{ errorMessage }}</div>
      {% endif %}

      {% for flashError in app.flashes('error_access') %}
          <div style="margin-bottom: 4%;" class="alert alert-danger" role="alert">{{ flashError[0] }}</div>
      {% endfor %}
  {% endblock %}

 {% block login_form %}
     {% if app.environment === 'info' %}
         <div style="position: absolute; left: 1rem; top: 60%;">
             <img src="{{ asset('/images/demoLogin.png') }}" alt="demo login" style="width: 65%; background-color: transparent">
         </div>
     {% endif %}
     <form action="{{ path('app_login') }}" method="post">
         {% block login_form_start %}{% endblock %}
         <div class="form-group has-feedback">
             <input id="email" type="text" name="email" class="form-control"
                    placeholder="{{ 'LOGIN.USERNAME'|trans({}) }}"
                    value="{{ last_username|default('') }}">
             <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
             <span id="spanEmailMissing"
                   style="color: red;display: none;">Veuillez renseignez votre adresse-email</span>
         </div>
         <div class="form-group has-feedback">
             <input id="password" name="password" type="password" class="form-control"
                    placeholder="{{ 'Password'|trans({}, 'AdminLTEBundle') }}">
             <span class="glyphicon glyphicon-eye-open form-control-feedback" id="togglePassword"
                   style="cursor: pointer;"></span>
             <span id="spanPasswordMissing"
                   style="color: red;display: none;">Veuillez renseignez votre mot de passe</span>
         </div>
         <div class="form-group">
             <input id="remember_me" name="_remember_me" type="checkbox" style="cursor: pointer;">
             <label for="remember_me" style="cursor: pointer;">{{ 'Remember Me'|trans({}, 'AdminLTEBundle') }}</label>
         </div>
         <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
         <div class="form-group" style="margin-bottom: 6%;">
             <button id="btnLogin" type="submit"
                     class="btn btn-block btn-primary">Se connecter
             </button>
         </div>
         {% block login_form_end %}{% endblock %}
     </form>
 {% endblock %}

{% block login_actions %}
    {% if app.environment !== 'info' %}
        <a href="{{ path('reset_password_forgot_request') }}">
            {{ 'I forgot my password'|trans({}, 'AdminLTEBundle') }}
        </a>
        <br>
    {% endif %}
{% endblock %}

{% block login_box %}
    {{ parent() }}
    <div class="login-box-bottom">
        <div class="login-box-support" style="width: inherit;">
            <a id="linkSupportMail" style="color: inherit;cursor: pointer;" class="login-box-support-a">
                <i class="fas fa-phone" style="padding-right: 0%"></i>
                <span>{{ 'LOGIN.TECHNICAL_SUPPORT'|trans({}) }}</span>
            </a>
            <a href="{{ full_url }}" style="color: inherit;margin-left: 25%;" target="_blank"
               class="login-box-support-a">
                <i class="fas fa-mouse-pointer" style="padding-right: 0%"></i>
                <span>{{ base_url }}</span>
            </a>
        </div>
    </div>
    {{ include('bundles/FOSUserBundle/Security/_modal_support_mail.html.twig') }}
{% endblock %}

{% block javascripts %}
    <script type="application/javascript">
        let url ='{{ path("app_checkCrsf") }}';
        const message = {{ app.flashes('error')|first|last|json_encode|raw }};
        if (message != null && message.includes('autre appareil')) {
            toastr.options.timeOut = 30000;
            toastr.options.progressBar = true;
            toastr.options.positionClass = "toast-top-right-custom";
            toastr.options.preventDuplicates = true;
            toastr.error(message, "");
        }
    </script>
    <script src="{{ asset('install-bois/login.js') }}"></script>
{% endblock %}

{# {% block login_box_error %} #}
    {# {% if error is not defined or error is empty %} #}
        {# {% set error = {'messageKey': 'Login with "admin/password" or "user/password"', 'messageData': {}} %} #}
    {# {% endif %} #}
    {# {{ parent() }} #}
{# {% endblock %} #}