{% block view %}
{% set locale = document.getProperty('language') ? document.getProperty('language') : 'de_DE' %}
<div class="c-loginbox {% if componentMargin is defined %}{{componentMargin}}{% endif %}">
{# {% if error %}
<div class="c-login__alert">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %} #}
{% if editmode %}
Bitte den Link zu den Nutzungsbestimmungen festlegen.
{% else %}
<form action="/mvk-api/{{locale}}/v1/firstlogin/check" method="post" class="js-custom-form" id="first-login-form">
<h2>{{'mvk_doc_fe_Loginbox_firstlogin' | trans }}</h2>
<label for="username">{{'mvk_doc_fe_firstlogin_username' | trans }}</label>
<p>{{'mvk_doc_fe_firstlogin_username_text' | trans }}</p>
<input type="text" id="username" name="username" required="required" inputmode="numeric">
<label for="password">{{'mvk_doc_fe_Loginbox_uniquepassword' | trans }}</label>
<p>{{'mvk_doc_fe_Loginbox_uniquepassword_text' | trans }}</p>
<input type="text" id="password" name="password" required="required">
<div id="uniquepasswordError" class="validation-message"></div>
<div class="c-separator c-separator__size--100 c-separator__alignment--horizontal spacing-component-small-margin spacing-component-padding-none-left-right mx-0"><hr></div>
<h2>{{'mvk_doc_fe_Loginbox_firstlogin_data' | trans }}</h2>
<label for="newPassword">{{'mvk_doc_fe_Loginbox_password' | trans }}</label>
<p>{{'mvk_doc_fe_Loginbox_password_text' | trans }}</p>
<div class="c-loginbox__password">
<input type="password" id="newPassword" name="newPassword" required="required">
<span class="toggle-password" id="togglePassword"></span>
</div>
<div id="newPasswordError" class="validation-message"></div>
<label for="newPasswordRepeat">{{'mvk_doc_fe_Loginbox_password_repeat' | trans }}</label>
<input type="password" id="newPasswordRepeat" name="newPasswordRepeat" required="required">
<div id="newPasswordRepeatError" class="validation-message"></div>
<label for="email">{{'mvk_doc_fe_Loginbox_email' | trans }}</label>
<input type="email" id="email" name="email" required="required">
<div id="emailError" class="validation-message"></div>
<label for="emailRepeat">{{'mvk_doc_fe_Loginbox_email_repeat' | trans }}</label>
<input type="email" id="emailRepeat" name="emailRepeat" required="required">
<div id="emailRepeatError" class="validation-message"></div>
<div class="check-wrapper">
<input type="checkbox" id="firsttimelogin_termsOfUse" name="firsttimelogin[termsOfUse]" required="required" value="1">
<label class="required" for="firsttimelogin_termsOfUse">Ich habe die <a href="{% if termsofuseUrl is defined and termsofuseUrl is not null %}{{ termsofuseUrl.getFullPath() }}{% endif %}" target="_blank">Nutzungsbestimmungen</a> gelesen und akzeptiere diese.</label>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
<button type="submit" id="firstLoginSubmitButton" disabled>{{'mvk_doc_fe_Loginbox_button_send' | trans }}</button>
<p></p>
</form>
{% endif %}
</div>
{% endblock %}