<div class="top-pad"></div>

<div class="content-padding">

	<h1 class="title left"><i class="fa fa-lock"></i><span>Password</span></h1>

	<div class="divider"></div>

	<form name="form" novalidate>

		<div class="support-boxes">

			<div class="support-box-wrap box-content2">

				<div class="support-box-wrap-header">
					<h1>Change your password</h1>
					<div class="divider"></div>
				</div>

				<div class="no-box-content-color">

					<ul ng-class="{'submitted':submitted}" class="ul-inputs">

						<li class="li-input" ng-class="{'error':form.passwordCurrent.$invalid}">
							<div class="label">Current Password:</div>
							<div class="input"><input type="password" name="passwordCurrent" ng-model="password.current" required placeholder="Current Password" ></div>
							<div class="box-error">
								<small ng-show="form.passwordCurrent.$error.required">Required.</small>
							</div>
						</li>

						<li class="li-input" ng-class="{'error':form.passwordNew.$invalid}">
							<div class="label">New Password (Please choose a new password of at least 7 characters):</div>
							<div class="input">
								<input password-strength type="password" name="passwordNew" ng-model="password.new" required placeholder="New Password" ng-minlength="5" ng-maxlength="250" >
									<small class="tip" ng-if="password_strength_message && password.new">
										<span class="tag tag-red" ng-if="password_strength_message == 'weak'">Weak</span>
										<span class="tag tag-green" ng-if="password_strength_message == 'strong'">Strong</span>
										<span class="tag tag-blue" ng-if="password_strength_message == 'good'">Good</span>
									</small>
							</div>
							<div class="box-error">
								<small ng-show="form.passwordNew.$error.required">Required.</small>
								<small ng-show="form.passwordNew.$error.minlength">The new password is too short. It is required to be at least 5 characters.</small>
								<small ng-show="form.passwordNew.$error.maxlength">Password cannot be longer than 250 characters.</small>
								<small ng-show="form.passwordNew.$error.passwordStrength">Your password is too weak.</small>
							</div>
						</li>


						<li class="li-input" ng-class="{'error':form.passwordConfirm.$invalid}">
							<div class="label">Confirm:</div>
							<div class="input"><input type="password" name="passwordConfirm" equals="{{password.new}}" ng-model="password.confirm" required placeholder="Current Password"></div>
							<div class="box-error">
								<small ng-show="form.passwordConfirm.$error.required">Required.</small>
								<small ng-show="form.passwordConfirm.$error.equals">Must be equal!</small>
							</div>
						</li>
						<li class="li-input" ng-show="!isSaving">
							<button class="button button-green button-empty button-border" ng-click="save();">Change</button>
						</li>
						<li class="li-input" ng-show="isSaving">
							<i class="fa fa-circle-o-notch fa-spin"></i>
						</li>

					</ul>
				</div>
			</div>
		<div class="divider"></div>
	</form>
</div>
<hack-expand-content></hack-expand-content>
