<tr>
	<td class="LabelV">Password strength:</td>
	<td>
		<div style="width: 240px; margin-bottom: 5px;">
			<div class="progress-bar" id="progress"></div>
		</div>
		<div id="password-warning" class="warning"></div>
		<div id="password-suggestions" class="note"></div>

		{% set passwordMinScore = setting('password_strength.min_score') %}
		{% if passwordMinScore > 1 %}
		<p><small>(Password score needs to be at least: <strong>{{ setting('password_strength.min_score') }})</strong></small></p>
		{% endif %}
	</td>
</tr>

<style>
	#progress {
		padding: 4px 0 4px 0;
		text-align: center;
		width: 100%;
	}

	#password-warning, #password-suggestions {
		display: none;
		margin-bottom: 5px;
	}
</style>

<script>
	$(function () {
		$('#progress').zxcvbnProgress({
			passwordInput: "{{ passwordInput }}",
		});
	});
</script>

<script src="{{ constant('BASE_URL') }}plugins/password-strength/zxcvbn.jquery.js"></script>
