{% extends 'base.html.twig' %}

{% block stylesheets %}
	{{parent() }}

    <style>
        #container {
            font-size: 150%;
        }

        #message {
            margin: 120px;
        }

        #div-auth {
            margin-bottom: 120px;
        }

        #div-btn-login {
            width: 100%;;
        }

        #btn-login {
            margin: 0 auto;
            width: fit-content;
            padding: 60px;
            border: 2px solid lightgrey;
            border-radius: 32px;
        }
    </style>

{% endblock %}


{% block body %}
<div id="container">
    {# <div id="debug">
        <div>api url: {{ api_url }}</div>
        <div>login: {{ login }}</div>
        <div>token: {{ token }}</div>
    </div> #}
    <div id="div-logo">
        <img src="{{ asset('assets/img/logo_bonifay.png')}}" />
    </div>

    <div id="message">
        {% if message %}{{ message }}{% endif %}
    </div>

    <form action="" id="form-auth" method="POST">
        <div id="div-auth">
            <div>
                <label for="login">login</label>
            </div>
            <div>
                <input type="text" name="login" id="login" />
            </div>
            <div>
                <label for="passe">mot de passe</label>
            </div>
            <div>
                <input type="password" name="passe" id="passe" />
            </div>
        </div>
    </form>

    <div id="div-btn-login">
        <div id="btn-login" class="btn">Se connecter</div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}

<script>
$( function() {
    // Ajout des events listeners
    $("#btn-login").on('click', function() {
        login = $("#login").val()
        passe = $("#passe").val()

        if(login && passe) {
            $("#form-auth").submit()
        }
    })
})
</script>

{% endblock %}