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

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('datevj/css/datepicker-bs4.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('datevj/css/datepicker-bulma.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('datevj/css/datepicker-foundation.min.css') }}" rel="stylesheet" />
    <style>
		

        .container{
            margin-left: auto;
            margin-right: auto;
            width: 100%;
			padding:0 !important;
        }
		
		html {
			background: -webkit-linear-gradient(rgba(255,255, 255, 0.5), rgba(255,255,255, 0.5)), url("/images/home_page/syres-bg.jpg") no-repeat center center fixed;
			background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255, 0.5)), url("/images/home_page/syres-bg.jpg") no-repeat center center fixed; /* The least supported option. */ 
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			height: 100%;
			width: 100%;
			overflow: hidden;
		}
		
		.widthC {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width:380px;	
		}
		
		@media only screen and (max-width: 768px) {
		.widthC {
			background: none;
	        box-shadow: none;
			border-radius: 0;
		  }
		}

		.sign-in {
			font-weight: 400;
			padding:0 0 1rem;
			text-align: center;
			font-size: 1.25em;
            font-family: 'Montserrat', sans-serif;
			display: none;
		}
		
		.credentials {
		    margin: 2.5rem 0rem 1rem;
    font-weight: 600;
    color: #3c5361;
    font-size: .7em;
    letter-spacing: 1px;
    text-transform: uppercase;
}
		
        #login_form{
            padding: 35px;
			background-color:white;
			border-radius: 4px;
			box-shadow: 0 2px 36px rgba(0,0,100,.35), 0 0 1px rgba(0,0,100,.25);
        }

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

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

        .lineHInputP{
			height: 40px;
        }
		input {
			color: #222222;
			font-weight: 400;
			font-size: .8em;
        }
        .centerBL{
            text-align: center;
        }
        .bL{
            width: 100%;
			font-size: 1em;
            border-radius: 4px;
            background-color: #1cd9ff;
			border:none;
            color: white;
			font-weight: 600;
			cursor: -webkit-grab; cursor: grab;
            font-family: 'Montserrat', sans-serif;
            line-height: 48px;
			height: 48px;
			
        }
        p {
			font-family: 'Montserrat', sans-serif;
        }
        input {
			font-family: 'Montserrat', sans-serif;
        }

		#club, #syres {
			font-weight:800 !important;
			font-size:1.5em !important;
			display: inline-block;
			margin-top:0;
			font-family: 'Montserrat', sans-serif;
		}
		#logo-club {
			text-align: left !important;
			margin: 0 0 2rem;
		}
		#club {
			color:#1cd9ff;
		}
		#syres {
			color:#03363d;
		}

		.orderweb__839c60e3 {
            transition-property: box-shadow;
            transition-duration: 150ms;
            transition-timing-function: ease-out;
            border-radius: 4px;
            height: 48px;
            width: 100%;
            font-size: 16px;
            font-weight: 400;
            background-color: #4C69BA;
            border: none;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            outline: none;
            cursor: pointer;
			font-family: inherit;
        }

            .ccl-abe5c41af1b9498e {
            width: 24px;
            height: 24px;
        }
        .ccl-462400680c526774 {
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
            display: -webkit-inline-box;
            display: -webkit-inline-flex;
            display: -ms-inline-flexbox;
            display: inline-flex;
            vertical-align: text-bottom;
        }
        .ccl-d52c0dc87c03d8a1 {
            padding-right: 8px;
        }

                .ccl-0f24ac4b87ce1f67.ccl-be253fe60aa767f4 {
            color: #fff;
        }
        .ccl-abe5c41af1b9498e {
            width: 24px;
            height: 24px;
        }
        svg[Attributes Style] {
            height: 24;
            width: 24;
        }
        user agent stylesheet
        svg:not(:root) {
            overflow: hidden;
        }
                .ccl-0f24ac4b87ce1f67 path {
            fill: currentColor;
        }
                .ccl-d9067e2b2b75c64a {
            padding-top: 16px;
            padding-bottom: 16px;
        }
                .orderweb__d28fa935 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
                .orderweb__c09efef8 {
            position: relative;
            width: 100%;
            height: 20px;
        }
                .orderweb__c09efef8::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 0;
            opacity: 0.24;
            border-bottom: 1px solid #8C9B9B;
        }
                .orderweb__4b0ea169 {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            background-color: white;
            padding: 0 15px;
            color: #8C9B9B;
			font-weight: 300;
        }
		body {
			background-color: #ffffff !important;
			font-family: 'Montserrat', sans-serif !important;
		}

        #email{
            border: 0px;
            width: 310px;
            line-height: 43px;
            background-color: white;
			border-radius: 3px;
			padding: 3px 0 3px 15px;
        }
		
		.box-shadow, .dateDeNaissanceLogin {
			box-shadow:0 0 1px rgba(0,0,100,1), 0 0 1px rgba(0,0,100,1);
			border-radius: 3px;
		}
        .dropdown-menu{
            overflow: hidden;
            height: 200px !important;
            position: absolute;
            transform: translate3d(0px, -203px, 0px);
            left: 0px;
            will-change: transform;
            max-height: 200px !important;
            min-height: 200px !important;
        }
        .bs-searchbox{
            height: 200px !important;
        }

        label {
            width: 20%;
            text-align: left;
        }

        .divW {
            width: 100%;
        }

        .dropdown-menu {
            min-height: fit-content;
        }

        .open {
            min-height: fit-content;

        }

        ::placeholder {
            color: rgba(0,0,50,.5) !important;
            margin:none;
            padding:none;
			font-weight: 300;
        }

        #content{

            min-height: 100%;
        }


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

        .dateDeNaissance{
            border: 0px;
            text-align: -webkit-center;
            display: block;
            background-color: white;
        }
		
		.dd, .mm, .yyyy {
			width: 102px;			
			padding: 3px 0;
            line-height: 43px;
		}
		
		.dd {
			border-top-left-radius: 3px;
			border-bottom-left-radius: 3px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
            border: 0px;
		}

		.mm {
			border-top-left-radius: 0;
			border-bottom-left-radius:0 ;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
            border-left: 1px solid #F2F2F2;
			border-right: 1px solid #F2F2F2;
		}

		.yyyy {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
            border: 0px;
		}
		
        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 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">
			

            <form  id="login_form" action="{{ path("app_login") }}" method="post">

                {% if error %}
                    <div class="alert alert-danger">{{ error.messageKey(error.messageData, 'security') }}</div>
                {% endif %}

                {% if msg %}
                    <div class="alert alert-danger">{{ msg }}</div>
                {% endif %}
                {% if enabledM %}
                    <div class="alert alert-danger">{{ enabledM }}</div>
                {% endif %}

                {% if dateNaissance %}
                    <div class="alert alert-danger">{{ dateNaissance }}</div>
                {% endif %}

							                    <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>

					<div class="sign-in">Sign in to your account</div>

					<div class="credentials">Email</div>
                    
					<div class="d_flex margeEntreDiv box-shadow margin-bottom" style=" width: 100%; ">
                        <input id="email" type="email" value="{{ last_username }}" name="email"
                               placeholder="example@mail.com" class="form-control inputLoginD" required
                               autofocus>
                    </div>

					<div class="credentials">Date of birth</div>

                    <div>

                        <div class="dateDeNaissanceLogin margeEntreDiv margin-bottom">
							<input name="jour" id="jour" placeholder="dd" maxlength="2" type="text" class="form-control dateDeNaissance inputLoginD dd inputs" required>
							<input name="mois" id="mois" placeholder="mm" maxlength="2" type="text" class="form-control dateDeNaissance inputLoginD mm inputs" required>
							<input  name="annee" id="annee" placeholder="yyyy" maxlength="4" type="text" class="form-control dateDeNaissance inputLoginD yyyy inputs" required>
                        </div>
                    </div>
                    <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">Log in
                        </button>
                    </div>
					
					
					                    <div class="ccl-d9067e2b2b75c64a">
                        <div class="orderweb__d28fa935"><span class="orderweb__c09efef8"><span
                                        class="orderweb__4b0ea169">or</span></span></div>
                    </div>

					
					                    <div class="centerBL">
                        <a href="{{ path('connect_facebook_start') }}">
                            <button type="button" class="orderweb__839c60e3 metro"><span
                                        class="ccl-462400680c526774 ccl-abe5c41af1b9498e ccl-d52c0dc87c03d8a1"><svg
                                            height="24" width="24" viewBox="0 0 24 24"
                                            class="ccl-0f24ac4b87ce1f67 ccl-abe5c41af1b9498e ccl-be253fe60aa767f4"><path
                                                d="M22 12C22 6.47715 17.5229 2 12 2C6.47715 2 2 6.47715 2 12C2 16.9913 5.65686 21.1283 10.4375 21.8785V14.8906H7.89844V12H10.4375V9.79688C10.4375 7.29063 11.9304 5.90625 14.2146 5.90625C15.3087 5.90625 16.4531 6.10156 16.4531 6.10156V8.5625H15.1921C13.9499 8.5625 13.5625 9.33334 13.5625 10.1242V12H16.3359L15.8926 14.8906H13.5625V21.8785C18.3431 21.1283 22 16.9913 22 12Z"></path></svg></span>Login
                                with Facebook
                            </button>
                        </a>
                    </div>
					
                </div>
			</form>
		</div>
		</div>


{% endblock %}
{% block footer %}
    {{ parent() }}

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

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
    <script src="{{ asset('datevj/js/datepicker.min.js') }}"></script>
    <script src="{{ asset('datevj/js/datepicker-full.js') }}"></script>

    <script>
        const elem = document.querySelector('input[name="dateL"]');
        const datepicker = new Datepicker(elem, {
            // options here
            //maxDate: null,
            //console.log(maxDate)
        });
    </script>

	<script>
$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});
</script>
{% endblock %}