{% extends '@Login/loginLayout.twig' %}

{% block loginContent %}
    <div class="contentForm loginForm">
        {% embed 'contentBlock.twig' with {'title': 'Login_LogIn'|translate} %}
            {% block content %}
                <div class="message_container">

                    {{ include('@Login/_formErrors.twig', {formErrors: form_data.errors } )  }}

                    {% if AccessErrorString %}
                        <div vue-entry="CoreHome.Notification"
                             noclear="true"
                             context="error">
                            <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
                        </div>
                    {% endif %}

                    {% if infoMessage %}
                        <div class="alert alert-info">{{ infoMessage|raw }}</div>
                    {% endif %}
                </div>
                <form {{ form_data.attributes|raw }}>
                    <div class="row">
                        <div class="col s12 input-field">
                            <input type="text" name="form_login" id="login_form_login" class="input" value="" size="20"
                                   placeholder="" autocomplete="username" autocorrect="off" autocapitalize="none"
                                   spellcheck="false" tabindex="10" autofocus="autofocus" />
                            <label for="login_form_login">
                                <i class="icon-user icon"></i> {{ 'Login_LoginOrEmail'|translate }}
                            </label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 input-field">
                            <input type="hidden" name="form_nonce" id="login_form_nonce" value="{{ nonce }}"/>
                            <input type="hidden" name="form_redirect" id="login_form_redirect" value=""/>
                            <input type="password" name="form_password" id="login_form_password" class="input"
                                   value="" size="20" placeholder="" autocomplete="current-password" autocorrect="off"
                                   autocapitalize="none" spellcheck="false" tabindex="20"
                                   vue-directive="CoreHome.AutoClearPassword" />
                            <label for="login_form_password">
                                <i class="icon-locked icon"></i> {{ 'General_Password'|translate }}
                            </label>
                        </div>
                    </div>

                    <div class="row actions">
                        <div class="col s6">
                            <label>
                                <input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1"
                                       tabindex="90"
                                       {% if form_data.form_rememberme.value %}checked="checked" {% endif %}/>
                                <span>{{ 'Login_RememberMe'|translate }}</span>
                            </label>
                        </div>
                        <div class="col s6 right-align">
                            <a id="login_form_nav" href="#" tabindex="95"
                               title="{{ 'Login_LostYourPassword'|translate }}">
                                {{ 'Login_LostYourPassword'|translate }}
                            </a>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <input class="submit btn btn-block" id="login_form_submit" type="submit"
                                   value="{{ 'Login_LogIn'|translate }}" tabindex="100" disabled="disabled"
                            />
                        </div>
                    </div>
                </form>

                <div class="row">
                    <div class="col s12">
                        {{ postEvent("Template.loginNav", "top") }}
                        {{ postEvent("Template.loginNav", "bottom") }}
                    </div>
                </div>

                {% if isCustomLogo %}
                    <p id="piwik">
                        <i><a href="{{ 'https://matomo.org/'|trackmatomolink }}" rel="noreferrer noopener" target="_blank">{{ linkTitle }}</a></i>
                    </p>
                {% endif %}

            {% endblock %}
        {% endembed %}
    </div>
    <div class="contentForm resetForm" style="display:none;">
        {% embed 'contentBlock.twig' with {'title': 'Login_ChangeYourPassword'|translate} %}
            {% block content %}

                <div class="message_container">
                </div>

                <form id="reset_form" method="post">
                    <div class="row">
                        <div class="col s12 input-field">
                            <input type="hidden" name="form_nonce" id="reset_form_nonce" value="{{ nonce }}"/>
                            <input type="text" placeholder="" name="form_login" id="reset_form_login" class="input" value="" size="20"
                                   autocorrect="off" autocapitalize="none"
                                   tabindex="10"/>
                            <label for="reset_form_login"><i class="icon-user icon"></i> {{ 'Login_LoginOrEmail'|translate }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 input-field">
                            <input type="password" placeholder="" name="form_password" id="reset_form_password" class="input" value="" size="20"
                                   autocorrect="off" autocapitalize="none" spellcheck="false"
                                   tabindex="20" autocomplete="off"
                                   vue-directive="CoreHome.AutoClearPassword" />
                            <div vue-entry="CoreHome.PasswordStrength"
                                 external-input-selector="#reset_form_password"
                                 validation-rules="{{ passwordStrengthValidationRules|json_encode }}"
                            ></div>
                            <label for="reset_form_password"><i class="icon-locked icon"></i> {{ 'Login_NewPassword'|translate }}</label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12 input-field">
                            <input type="password" placeholder="" name="form_password_bis" id="reset_form_password_bis" class="input" value=""
                                   autocorrect="off" autocapitalize="none" spellcheck="false"
                                   size="20" tabindex="30" autocomplete="off"
                                   vue-directive="CoreHome.AutoClearPassword" />
                            <div vue-entry="CoreHome.PasswordStrength"
                                 external-input-selector="#reset_form_password_bis"
                                 validation-rules="{{ passwordStrengthValidationRules|json_encode }}"
                            ></div>
                            <label for="reset_form_password_bis"><i class="icon-locked icon"></i> {{ 'Login_NewPasswordRepeat'|translate }}</label>
                        </div>
                    </div>

                    <div class="row actions">
                        <div class="col s12">
                            <input class="submit btn btn-block" id='reset_form_submit' type="submit"
                                   value="{{ 'General_ChangePassword'|translate }}" tabindex="100"/>

                            <span class="loadingPiwik" style="display:none;">
                                {% include "@CoreHome/_loader.twig" %}
                            </span>
                        </div>
                    </div>

                    <input type="hidden" name="module" value="{{ loginModule }}"/>
                    <input type="hidden" name="action" value="resetPassword"/>
                </form>
                <p id="nav">
                    <a id="reset_form_nav" href="#"
                       title="{{ 'Mobile_NavigationBack'|translate }}">{{ 'General_Cancel'|translate }}</a>
                    <a id="alternate_reset_nav" href="#" style="display:none;"
                       title="{{'Login_LogIn'|translate}}">{{ 'Login_LogIn'|translate }}</a>
                </p>
            {% endblock %}
        {% endembed %}
    </div>

{% endblock %}