<!doctype html>
<html>
    <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="{{ base() }}favicon.ico" type="image/x-icon">
    {{ titleHtml() }}
    
	<script type="text/javascript">
		var separateur = 'debut-----fin';
		var messageAttention = '{{ 'Non bloquant' | trad }}';
	</script>
	{{ skinCode() }}
	
	{% include '@GlobalApplication/Template/_script.twig' %}
	
    <meta charset="utf-8">
    </head>
    
    
    
    <body>
        {# utilisé pour les tooltip boostrap vue qu'on a pas les versions récente, on ne peut pas appliquer de class directement dessus #}
        {# DO NOT MOVE #}
        <div id="div_tooltip"></div>
        <div class="body-wrapper">
        <div id='loader' style='display:none;'>
            <div id='picto_loader'>
            </div>
        </div>
        {{ bandeauOxaproc('bandeauConnexion') }}
    
    	<form id="connectForm" class="clearfix" method="post">
    		
			{{ connexionImage() }}
    	
            <div class="colonneLogIn">
            
            	<img class="imageUser" src="{{ baseUrl('IconeV2/Misc/User.png') }}"/>	
            
                <div id="divErrorMessage" class="zoneError" style="text-align: center">{{messageErreur | raw}}</div>
                <div>
                    <div class="single">
                    
                    {% if multiLangueActif %}
                        {{ inputAdvance('SELECT',{
                            'titre' : 'Langue' | trad,
                            'name' : 'langue'~langueInput,
                            'listeValue' : langues ,
                            'value' : langue,
                            'obligatoire' : true
                        }
                        ) }}
                    {% endif %}
                        <script>
							$('#input_langue{{langueInput}}').change(function(){

								var langue = $(this).val();
								
								$.ajax({
									  	dataType : 'html',
    									url: '{{ path('Connexion.Connexion.changementLangue') }}',
    									data: $('#connectForm').serialize(),
    									type: "POST",
    									success: function(result){
    										location.reload();
    									}
    								});
							});
                        </script>
                        
                    </div>
                </div>
                <div class="row>">
                    <div class="single">

                    
                    {% if ContexteMobile != true %}
                        {{ inputAdvance('TEXT',{
                            'titre' : 'Identifiant' | trad,
                            'name' : 'ID'~idInput,
                            'value' : login,
                            'obligatoire' : true
                        }
                        ) }}

                    {% else %}
                            {{ inputAdvance('TEXT',{
                                'titre' : 'Identifiant' | trad,
                                'name' : 'IDMob'~idInput,
                                'value' : MobilityLogin,
                                'obligatoire' : true,
                                'disabledField' : true
                            }
                            ) }}

                            <input type="hidden" name="{{'ID'~idInput}}" value="{{MobilityLogin}}" />

                    {% endif %}
                    </div>
                </div>
                <div class="row>">
                    <div class="single">
                        {{ inputAdvance('PASSWORD',{
                            'titre' : 'Mot de passe'| trad ,
                            'name' : 'MDP'~mdpInput,
                            'obligatoire' : true,
                            'showPassword' : true,
                            'value': cookieJwt ?? false,
                        }
                        ) }}
                    </div>
                </div>
                
                {% if captchaActif %}
	                <div class="row>">
                  	  	<div class="single">
                            {{ inputAdvance('CAPTCHA',{
                                'idCaptcha' : 'captchaLogin',
                                'name' : 'login',
                                }
                            ) }}
                    	</div>
                    </div>
                {% endif %}

                {% if rememberMe %}
                    <div class="row">
                        <div class="single">
                            {{ inputAdvance('SWITCH', {
                                'name': 'rememberMe',
                                'titre': 'Se souvenir de moi' | trad,
                                'value': (cookieJwt is not empty) | boolSql
                            }) }}
                        </div>
                    </div>
                {% endif %}


                <div class="single" style="margin-bottom: 1px">
                    <button type="submit" id="connexionIn" class="button principal btn-block">{{ 'Se connecter'| trad }}</button>
                </div>
                {% if infoSSO['ssoActiv'] == 1 and ContexteMobile != true %}
                    <div class="single" style="margin-bottom: 1px">
                        <a type="submit" id="connexionSSO" href="{{infoSSO['lienSSO']}}" class="button principal btn-block">{{ 'Se connecter en SSO' | trad }}</a>
                    </div>
                {% endif %}
                {% if ContexteMobile != true %}
                    <div class="div-link">
                        <a class="btn-link" data-toggle="tooltip" data-placement="bottom" href="{{ path('Index.Connexion.mdpOublie') }}">{{ 'Mot de passe oublié' | trad }} ?</a>
                        {% if autodeclaration != 'I' %}
                            <a class="btn-link link-right" data-toggle="tooltip" data-placement="bottom" href="{{ path('Index.CreationCompte.cordonne') }}">{{ 'Pas encore de compte' | trad }} ?</a>
                        {% endif %}
                    </div>
                {% endif %}
           	</div>

        </form>
    
        <script>$('[name^="ID"]').focus(); var baseUrl ='{{ baseUrl() }}';</script>
        <script type="text/javascript" src="{{ baseUrl('js/menu.js') }}"></script>
        <script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
        <script type="text/javascript" src="{{ baseUrl('ext/bootstrap-notify-3.1.3/js/bootstrap-notify.min.js') }}"></script>
        <script>
            document.querySelector('#connexionIn').addEventListener('click', () => {
                {% if ContexteMobile != true %}
                    deleteAllCaches();
                {% endif %}
                activeLoader();
            });
            {% if infoSSO['ssoActiv'] == 1 and ContexteMobile != true %}
                document.querySelector('#connexionSSO').addEventListener('click', () => {
                    deleteAllCaches();
                    activeLoader();
                });
            {% endif %}
        </script>
        
        <div id="footer" class="container-fluid footer clearfix">
        	<div>
        		{{ piedDePage() }}
            	<a href='https://www.oxalys.com' target='_blank'><img src="{{ baseUrl('IconeV2/Misc/logo-oxalys_50.png') }}" style="width:75px;margin-top:10px;float: right; margin-right: 20px;" /></a>
           </div>
        </div>
        
        {% if ContexteMobile == true %}
            <style>
                .container-fluid {
                        width: auto !important;
                }
            </style>
        {% endif %}
        {# TODO MSA  #}
        <style>
            .single, form .single {
                margin: 0px 0px 10px 0px !important;
            }
        </style>
        </div>
    </body>
</html>