{% extends 'App/_include/_layout.security.html.twig' %}
{% block content %}
<div class="grid-x align-center align-middle" style="height: 100vh">
    <div class="cell small-11 medium-8 large-4 callout login_box">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <div class="box-title">
                    <div><img src="{{ asset('images/logo_ad6_kanban_edit_blue.svg') }}" style="width:75px;margin-bottom: 0.3rem" alt="AD6 KanbanEdit"></div>
                    <div>AD6-Kanban<span class="text-light">Edit 21c</span></div>
                </div>
            </div>
            <div class="cell mt-1">
                <p class="text-center lead text-light">{{ 'registration.confirmation.title'|trans }}</p>
            </div>
        </div>
        {{ form_start(form_confirm,{'attr':{'id':'formActivateAccount','class':'grid-x grid-padding-x'}}) }}
            <div id="helper" class="cell mb-1 fw-300 fs-0-9 mt-0-5"></div>
             <div class="cell small-12">
                 {{ form_row(form_confirm.plainPassword.first) }}
                 {{ form_row(form_confirm.plainPassword.second, {'attr': {'data-parsley-equalto': '#activate_account_plainPassword_first'}}) }}
             </div>
             <div class="cell small-12 text-right mt-1">
                 <button class="button float-right" type="button" id="btnSubmitPassword">{{ 'registration.confirmation.button.confirm'|trans }}</button>
             </div>
        {{ form_end(form_confirm) }}
        <div class="grid-x">
            <div class="cell text-center">
                <a href="{{ url('app_login')}}">{{ 'registration.i_have_account'|trans }}</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block javascript_footer %}
    {{ parent() }}
    <script>
        $(document).ready(function () {
            let form_change_password = $('#formActivateAccount'),
                input_first = $('#activate_account_plainPassword_first'),
                input_second = $('#activate_account_plainPassword_second'),
                translators = {
                    'min_length' : "{{ 'password.min_length'|trans }}",
                    'min_digit' : "{{ 'password.min_digit'|trans }}",
                    'min_lowercase' : "{{ 'password.min_lowercase'|trans }}",
                    'min_uppercase' : "{{ 'password.min_uppercase'|trans }}",
                    'min_special_char' : "{{ 'password.min_special_char'|trans }}"
                }
            let form_change_password_parsley = $(form_change_password).parsley(parsley_options);
            init_helper($('#helper'), translators);
            $(input_first).on('input',function (){
                update_helper($(input_first).val(), translators);
            });
            $(input_first).focusout(function(){
                checkPassword(this);
            });
            $(input_second).focusout(function(){
                if( checkPassword(input_first) && $(input_first).val() !== $(input_second).val()) {
                    $(input_second).addClass('is-invalid-input');
                }
                else {
                    $(input_second).removeClass('is-invalid-input');
                }
            });
            $('#btnSubmitPassword').click(function(){
                let btn_submit = this;
                form_change_password_parsley.validate();
                if( checkPassword(input_first) && $(input_first).val() === $(input_second).val()) {
                    $(btn_submit).html(btn_spin);
                    $(form_change_password).submit();
                }
            });
        });
    </script>
{% endblock %}