{% extends "layout.html.twig" %}

{% trans_default_domain 'security' %}

{% block title %}
    {{ 'title.login'|trans }}
{% endblock title %}

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

{% block body %}
    <section id="login-section">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <img id="primeLogo" src="{{ asset('bundles/syndexacademic/images/academiaLogoNew_300.jpg') }}" alt="logo"
                         style="margin:0 auto;width: 200px;display: block"/>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4 col-sm-offset-4">
                    <div id="login_box" class="child" style="top: 5px">
                        {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                            <a href="{{ url('app_logout') }}" type="button"
                               class="btn btn-primary navbar-btn navbar-left">
                                {{ 'title.logout'|trans }}
                            </a>
                        {% else %}
                            <h4 class="form-header">
                                {{ 'title.login'|trans }}
                            </h4>
                            {% if data['error'] %}
                                <div class="alert alert-warning alert-dismissible" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                                aria-hidden="true">&times;</span></button>
                                    {{ data['error']|trans({}, 'FOSUserBundle') }}
                                </div>
                            {% endif %}
                            
                            <form id="login_form1" action="{{ path('app_login') }}" enctype="multipart/form-data" method="post">
                                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                                
                                <div class="input-group">
                                    <span class="input-group-addon" data-toggle="tooltip"
                                        title="{{ 'form.username'|trans }}"
                                        style="background-color:#00a550;border:1px solid #00a550 "><i class="fa fa-user"
                                                                                                        style="color:white; "></i></span>
                                    <input type="text" class="form-control" id="inputEmail3" name="_email"
                                           required="required"
                                           value="{{last_username}}"
                                           placeholder="{{ 'form.usernameAndEmail'|trans }}">
                                </div>
                                <div class="input-group" style="padding-top: 5px">
                                <span class="input-group-addon" data-toggle="tooltip"
                                      title="{{ 'form.password'|trans }}"
                                      style="background-color:#00a550;border:1px solid #00a550 "><i class="fa fa-key"
                                                                                                    style="color:white; "></i></span>
                                    <input type="password" class="form-control" id="inputPassword3" name="_password"
                                           required="required"
                                           placeholder="{{ 'form.password'|trans }}">
                                </div>
                                <div id="captcha-input" style="margin-top:5px;" class="form-group">
                                     {% if data['reCaptcha'] is defined %}                
                                        <div class="g-recaptcha brochure__form__captcha" data-toggle="reCaptcha" data-type="checkbox"></div>
                                    {% endif %}
                                </div>
                                <div class="form-group" style="padding-right: 15%">
                                    <label>
                                        <input type="checkbox" name="_remember_me" value="on">
                                        {{ 'form.remember_me'|trans }}
                                    </label>
                                </div>
                                <div class="form-group">
                                    <a href="{{url('app_forgot_password_request')}}">
                                        {{ 'form.recover_password'|trans }}
                                    </a>
                                </div>
                                <div class="form-group" style="padding-bottom: 10px;display:flex;justify-content:center;">
                                    <button id="login_form_submit_btn" type="submit" class="btn btn-default"
                                            style="background-color:#00a550;color:white;margin-inline-end: 10px;"
                                            name="_submit" value="{{ 'title.login'|trans }}"
                                            data-loading-text="{{ 'title.login'|trans }}..."
                                    >{{ 'title.login'|trans }}</button>
                                    <a href="{{ url('app_register')}}" class="btn btn-default" 
                                    style="background-color:#00a550;color:white;margin-inline-start: 10px;">
                                        {{ 'form.user_registration' |trans }}
                                    </a>
                                </div>
                                <div class="fb-login-button" data-width="360" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false" data-use-continue-as="true" data-scope="public_profile,email" onlogin="fbGetLoginStatus();"></div>
                            </form>
                            <form id="login_form2" action="{{ path('facbook_form') }}" enctype="multipart/form-data" method="post"><form>
                        {% endif %}
                    </div>
                </div>
            </div>

        </div><!-- /container -->
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?onload=onGoogleReCaptchaApiLoad&render=explicit&hl={{app.request.locale}}" async defer></script>

    <script>
        window.fbGetLoginStatus = function () {
            FB.getLoginStatus(function (response) {
                if (isConnected(response)) {
                    fbLogIn(response);
                }
            });
        }
        function isConnected(response) {
            return response.status === 'connected';
        }

        function fbLogIn(response) {
            let loginForm = document.querySelector('#login_form2');
            let input = getHiddenInput("fbAuthResponse", JSON.stringify(response.authResponse));    
            loginForm.appendChild(input);
            loginForm.submit();
        }

        function getHiddenInput(name, value) {
            let input = document.createElement("input");
            input.setAttribute("type", "hidden");
            input.setAttribute("name", name);
            input.setAttribute("value", value);
            return input;
        }
    </script> 
    
{% endblock %}