{% extends 'frontend/login.layout.html.twig' %}

{% block title %}Log in!{% endblock %}
{% block stylesheets %}
    {{ parent() }}

    <style>

        .container{
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        .widthC {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width:400px;
        }

        @media only screen and (max-width: 768px) {
            .widthC {
                background: none;
                box-shadow: none;
                border-radius: 0;
            }
        }

        #login_form{
            padding: 20% 10%;
            background: #ffffff;
            box-shadow:0 2px 42px rgba(0,0,100,.15);
            border-radius: 10px;
        }

        .text_alignPL {
            text-align: center;
            font-weight:400 !important;
        }

        .inputPassword {
            text-align: center;
            margin:20px 0;
        }

        .lineHInputP{
            height: 60px;
        }
        input {
            color: #222222;
            font-weight: 400;
            font-size: 16px;
            border-width: 1px;
            border-image: none;
            border-radius: 5px;
        }
        .centerBL{
            text-align: center;
        }
        .bL{
            width: 100%;
            border-radius: 10px;
            background-color: #1cd9ff;
            border:none;
            color: white;
            box-shadow: 0 1px 18px rgba(0,0,100,.1);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: -webkit-grab; cursor: grab;
        }
        p{
            font-family: 'Montserrat', sans-serif;
        }
        input{
            font-family: 'Montserrat', sans-serif;
        }
        div{
            font-family: 'Montserrat', sans-serif;
        }
        img{
            font-family: 'Montserrat', sans-serif;
        }
        button{
            font-family: 'Montserrat', sans-serif;
        }
        #club, #syres {
            font-weight:800 !important;
            font-size:1.5em !important;
            display: inline-block;
            margin-top:0;
        }
        #logo-club {
            text-align: center !important;
            margin: 0 auto;
            padding-bottom: 30px;
        }
        #club {
            color:#1cd9ff;
        }
        #syres {
            color:#03363d;
        }

    </style>
{% endblock %}

{% block content%}
    {{ parent() }}
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;600;800&display=swap" rel="stylesheet">
    <div class="container" style="align-items: center; ">
        <div class="widthC" style="top: 60%">
            <form  class="" id="login_form" action="{{ path("app_admin_login") }}" method="post">
                {% if error %}
                    <div class="alert alert-danger">{{ error.messageKey(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 %}
                 #}


                <style>
                    #email{
                        border: 1px solid #eeeeee;
                        width: 100%;
                        line-height: 60px;
                        padding-left: 20px;
                        background:#f5f7ff;
                        margin-bottom: 5px;
                    }
                    #password{
                        border: 1px solid #eeeeee;
                        width: 100%;
                        line-height: 60px;
                        padding-left: 20px;
                        background:#f5f7ff;
                    }
                </style>
                <p class="text_alignPL">Log in</p>
                <div id="logo-club">
                    <p class="text_alignPL" id="club">CLUB</p>
                    <p class="text_alignPL" id="syres" style="margin-bottom: 20px">SYRES</p>
                </div>

                <div class="d_flex margeEntreDiv" style=" width: 100%; ">
                    <input id="email" type="email" value="{{ last_username }}" name="_username" placeholder="Your e-mail"  class="form-control lineHInputP" required autofocus>
                </div>
                <div class="d_flex margeEntreDiv" style=" width: 100%; ">
                    <input id="password" type="password" name="_password" placeholder="Votre mot de passe"  class="form-control lineHInputP" required autofocus>
                </div>

                <style>
                    label{
                        width: 20%;
                        text-align: left;
                    }
                    .divW{
                        width: 100%;
                    }
                </style>

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



                {# je laisse continuer mais je pense que c'est l'enverse l'inverse de quoi sinon je rien dis chrome
                    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 class="centerBL">
                    <button class=" lineHInputP bL" type="submit" style="font-size: medium">Sign in</button>
                </div>
            </form>
        </div>
    </div>










    <style>

        ::placeholder {
            color: #999999 !important;
            margin:none;
            padding:none;
        }

        #content{

            min-height: 100%;
        }


        .margeEntreDiv{
            margin-bottom: 2px;
        }

        .margeEntreDivB{
            margin-bottom: 30px;
        }

        #inputEmail{
            margin-bottom: 4px;
            border-bottom: 10px solid red;
        }
        #l_fa{
            font-size: 27px;
            margin-right: 4px;
            color: #2980b9;
        }
        .d_flex{
            display: flex;
        }
        .dateDeNaissanceLogin{
            display: flex;
        }

        .dateDeNaissance{
            border: 1px solid #eeeeee;
            text-align: -webkit-center;
            margin: 0 auto;
            display: block;
            width: 90%;
            background: #f5f7ff;
        }
        label{
            margin: 0px;
        }

        .div_login_butn{
            background-color: #2980b9;
            text-align: center;
        }

        .login_butn{
            background-color: #2980b9;
            color: white;
        }

        hr{
            border-bottom: 1px solid #2980b9;
            width: 43%;
        }

        #mail{
            width: 100%;
            border-bottom: 1px solid #2980b9;
            margin-bottom: 8px;
        }
        #h5Login{
            color: grey; display: flex;
            margin-bottom: 40px;
        }
    </style>

{% endblock %}
{% block footer %}

{% endblock %}