<xf:if is="$checkStrength">
	<xf:js prod="xf/password_box-compiled.js" dev="vendor/dropbox/zxcvbn.min.js, xf/password_box.js" />
</xf:if>

<xf:set var="$input">
	<input type="password" name="{$name}" value="{$value}"
		class="input js-password {{ $hideShow ? 'input--passwordHideShow' : '' }}" {$attrsHtml|raw} />
</xf:set>

<div data-xf-init="{{ $checkStrength ? 'password-strength' : null }} {{ $hideShow ? 'password-hide-show' : '' }}"
	data-show-text="{{ phrase('button.show')|for_attr }}" data-hide-text="{{ phrase('button.hide')|for_attr }}">
	<xf:if is="$hideShow">
		<div class="inputGroup inputGroup--joined">
			{$input|raw}
			{$afterInputHtml|raw}
			<div class="inputGroup-text">
				<xf:checkbox standalone="true">
					<xf:option labelclass="iconic--hideShow js-hideShowContainer">{{ phrase('button.show') }}</xf:option>
				</xf:checkbox>
			</div>
		</div>
	<xf:else />
		{$input|raw}
	</xf:if>

	<xf:if is="$checkStrength">
		<meter min="0" max="100" class="meterBar js-strengthMeter" low="40" high="80" optimum="100"></meter>
		<span class="js-strengthText meterBarLabel">{{ phrase('entering_password_is_required') }}</span>
		<script class="js-zxcvbnLanguage" type="application/json">
			{
				"Straight rows of keys are easy to guess": "{{ phrase('straight_rows_of_keys_easy_to_guess')|escape('json') }}",
				"Short keyboard patterns are easy to guess": "{{ phrase('short_keyboard_patterns_easy_to_guess')|escape('json') }}",
				"Repeats like \"aaa\" are easy to guess": "{{ phrase('repeated_characters_such_as_aaa_easy_to_guess')|escape('json') }}",
				"Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\"": "{{ phrase('repeated_characters_such_as_abcabcabc_only_slightly_more_difficult')|escape('json') }}",
				"Avoid repeated words and characters": "{{ phrase('avoid_repeated_words_and_characters')|escape('json') }}",
				"Sequences like abc or 6543 are easy to guess": "{{ phrase('sequences_like_abc_or_6543_easy_to_guess')|escape('json') }}",
				"Recent years are easy to guess": "{{ phrase('recent_years_easy_to_guess')|escape('json') }}",
				"Dates are often easy to guess": "{{ phrase('dates_often_easy_to_guess')|escape('json') }}",
				"This is a top-10 common password": "{{ phrase('this_password_appears_in_top_10_most_common_passwords_list')|escape('json') }}",
				"This is a top-100 common password": "{{ phrase('this_password_appears_in_top_100_most_common_passwords_list')|escape('json') }}",
				"This is a very common password": "{{ phrase('this_password_is_very_common_password')|escape('json') }}",
				"This is similar to a commonly used password": "{{ phrase('this_password_is_similar_to_commonly_used_password')|escape('json') }}",
				"A word by itself is easy to guess": "{{ phrase('word_by_itself_is_easy_to_guess')|escape('json') }}",
				"Names and surnames by themselves are easy to guess": "{{ phrase('names_and_surnames_by_themselves_easy_to_guess')|escape('json') }}",
				"Common names and surnames are easy to guess": "{{ phrase('common_names_and_surnames_easy_to_guess')|escape('json') }}",

				"The chosen password could be stronger": "{{ phrase('the_chosen_password_could_be_stronger')|escape('json') }}",
				"Entering a password is required": "{{ phrase('entering_password_is_required')|escape('json') }}",
				"This is a very strong password": "{{ phrase('this_is_very_strong_password')|escape('json') }}",
				"This is a reasonably strong password": "{{ phrase('this_is_reasonably_strong_password')|escape('json') }}"
			}
		</script>
	</xf:if>
</div>