{% set pageTitle = 'General_SetPassword'|translate %}
{% extends '@Login/loginLayout.twig' %}

{% block loginContent %}
    <div class="contentForm invitationForm loginForm" id="invitationForm">
        {% embed 'contentBlock.twig' with {'title': 'General_SetPassword'|translate} %}
            {% block content %}
                <p class="loginForm__intro" id="invite-user-description">{{ 'Login_CreatePasswordDescription'|translate }}</p>

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

                <form class="loginForm__form" method="post"
                      action="{{ linkTo({'module': loginPlugin, 'action': 'acceptInvitation', 'token': null}) }}">
                    <input type="hidden" name="token" value="{{ token }}"/>
                    <div class="loginForm__row">
                        <div class="row">
                            <div class="col s12" id="invite-user-email-div">
                                <div class="loginForm__field">
                                    <div class="input-field">
                                        <input type="text" name="email" id="email" value="{{ user.email }}" size="20" readonly="readonly"
                                               tabindex="0"/>
                                        <label for="email">
                                            <i class="icon-email icon"></i> {{ 'UsersManager_Email'|translate }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loginForm__row">
                        <div class="row">
                            <div class="col s12 invite-user-pwd-div">
                                <div class="loginForm__field">
                                    <div class="input-field">
                                        <input type="password" placeholder="" name="password" id="password"
                                               class="input" value="" size="20"  autocomplete="new-password"
                                               autocorrect="off" autocapitalize="none" spellcheck="false"
                                               tabindex="1" required
                                               vue-directive="CoreHome.AutoClearPassword" />
                                        <div vue-entry="CoreHome.PasswordStrength"
                                             external-input-selector="#password"
                                             validation-rules="{{ passwordStrengthValidationRules|json_encode }}"
                                        ></div>
                                        <label for="password">
                                            <i class="icon-locked icon"></i> {{ 'General_Password'|translate }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="loginForm__row">
                        <div class="row">
                            <div class="col s12 invite-user-pwd-div">
                                <div class="loginForm__field">
                                    <div class="input-field">
                                        <input type="password" placeholder="" name="passwordConfirmation" id="password_confirm"
                                               class="input" value="" size="20" autocomplete="new-password"
                                               autocorrect="off" autocapitalize="none" spellcheck="false"
                                               tabindex="2" required
                                               vue-directive="CoreHome.AutoClearPassword" />
                                        <div vue-entry="CoreHome.PasswordStrength"
                                             external-input-selector="#password_confirm"
                                             validation-rules="{{ passwordStrengthValidationRules|json_encode }}"
                                        ></div>
                                        <label for="password_confirm">
                                            <i class="icon-locked icon"></i> {{ 'General_PasswordConfirmation'|translate }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {% if privacyPolicyUrl|default('') is not empty or termsAndCondition|default('') is not empty %}
                        <div class="loginForm__row loginForm__row--spacious">
                            <div class="row actions">
                                <div class="col s12">
                                    <div class="loginForm__field">
                                        <label>
                                            <input name="conditionCheck" type="checkbox" id="conditionCheck" value="1"
                                                   tabindex="89"/>
                                            <span>
                                                {% if privacyPolicyUrl|default('') is not empty and termsAndCondition|default('') is empty %}
                                                    {{ 'Login_BySigningUpPrivacyPolicy'|translate(
                                                        '<a class="loginForm__link" target="_blank" rel="noreferrer noopener" href="' ~ privacyPolicyUrl|safelink|e('html_attr') ~ '">',
                                                        '</a>'
                                                    )|raw }}
                                                {% elseif privacyPolicyUrl|default('') is empty and termsAndCondition|default('') is not empty %}
                                                    {{ 'Login_BySigningUpTermsAndCondition'|translate(
                                                        '<a class="loginForm__link" target="_blank" rel="noreferrer noopener" href="' ~ termsAndCondition|safelink|e('html_attr') ~ '">',
                                                        '</a>'
                                                    )|raw }}
                                                {% elseif privacyPolicyUrl|default('') is not empty and termsAndCondition|default('') is not empty %}
                                                    {{ 'Login_BySigningUpPrivacyPolicyAndTermsAndCondition'|translate(
                                                        '<a class="loginForm__link" target="_blank" rel="noreferrer noopener" href="' ~ privacyPolicyUrl|safelink|e('html_attr') ~ '">',
                                                        '</a>',
                                                        '<a class="loginForm__link" target="_blank" rel="noreferrer noopener" href="' ~ termsAndCondition|safelink|e('html_attr') ~ '">',
                                                        '</a>'
                                                    )|raw }}
                                                {% endif %}
                                            </span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <div class="loginForm__row loginForm__row--noGap">
                        <div class="row">
                            <div class="col s12">
                                <div class="loginForm__field">
                                    <input class="submit btn btn-block" name="invitation_form" id="login_form_submit" type="submit"
                                           value="{{ 'General_Confirm'|translate }}"
                                           tabindex="100"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                {% 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>
{% endblock %}