{% extends 'Application/' ~ settings.get("theme") ~'/base.html.twig' %}

{% block title %}Log in!{% endblock %}

{% block body %}

<h1>
    <div class="ico_lock"></div>
    {{ 'Se connecter au site'|trans }}
</h1>


<div id="middle">
<div id="connexionbox">
<div id="connexionboxvideo">
<video autoplay muted loop playsinline>
    <source src="../videos/video.mp4" type="video/mp4">
  </video>
 </div> 
<div id="connexionboxcontent">  
    <form method="post" class="login-container" action="{{ path('app_login') }}">
        {% if error %}
        <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
        {% endif %}


        {% if app.user %}
        <div class="mb-3">
            You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
        </div>
        {% endif %}
        <div class="form-group">
            <label for="inputUsername"><font color="white">
                <span>*</span>
                {{ 'Nom de compte'|trans }}:
            </font></label>
            <input type="text" id="inputUsername" name="username" class="w-100">
        </div>
        <div class="form-group">
            <label for="inputPassword">
                <span>*</span>
                <font color="white">{{ 'Mot de passe'|trans }}
                :</font>
            </label>
            <input type="password" id="inputPassword" name="password" class="w-100">
        </div>

        <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">

        {#
        Uncomment this section and add a remember_me option below your firewall to activate remember me functionality.
        See https://symfony.com/doc/current/security/remember_me.html

        <div class="checkbox mb-3">
            <label>
                <input type="checkbox" name="_remember_me"> Remember me
            </label>
        </div>
        #}
<div style="margin-left:50px">
        <button name="connection" type="sumbit" class="customBTN w-100" id="customBTN">
            {{ 'Me connecter'|trans }}
           </button></div>
        <p style="margin-left:120px;">
            <a href="{{ path('passwordResetRequest') }}">{{ 'Mot de passe oublié ?'|trans }}</a>
        </p>
    </form>
	</div>
</div>
</div>
{% endblock %}