{% extends 'themes/default/login.layout.html' %}
{% block body %}
<div class="container center-align">
	<div class="row">

		<div class="col s12 m6 offset-m3 card z-depth-4" style="margin-top: 5%;padding:0px">

			<div class="card cardlogin">
				<div class="card-content">

					<div class="card-image">
						<img src="{{app.config['app_url']}}/app/themes/default/resources/images/{{app.config['auth_logo']}}"
							class="login-logo">
					</div>

					<div id="customerresetpswtab" class="logintabpanel">

						<h6><b>Nulstil kodeord</b></h6>


						<div class="col s12 card grey white-text hide" id="pswresetcheck" style="padding:10px;">
							Checker brugernavn ...
						</div>

						<div class="col s12 card red white-text hide" id="pswreseterror" style="padding:10px;">
							Nulstil kodeord fejl
						</div>

						<div class="resetinputdiv">

							<div class="input-field col s12">
								<input name="password" id="resetpassword" type="password" class="validate">
								<label for="resetpassword">{{"Password"|trans}}</label>
							</div>
							<div class="input-field col s12">
								<input name="confirm_password" id="resetconfirmpassword" type="password" class="validate">
								<label for="resetconfirmpassword">{{"Confirm Password"|trans}}</label>
							</div>


							<div class="input-field col s12 center-align">
								<a href="javascript:customerPswReset()"
									class="btn {{themebasiccolor}} col s12" />Nulstil kodeord</a>
							</div>

						</div>

						<div class="col s12 center-align">
							<br><a style="float:left;" class="red-text" href="{{app.config.base_url}}/login">Tilbage
								til Login</a><br>
						</div>
						<div class="clearfix"></div>
					</div>
					{% endblock %}
					{% block footer %}


					<script>
						var orWidth = 0;

						$(function () {
							orWidth = $(".login-logo").width();
							$(".login-logo").css("max-width", orWidth + "px").css("margin", "auto");
							//togglePanel("customerregistertab");
						})

						function togglePanel(panelid) {
							if (panelid == "customerregistertab")
								$(".cardlogin").parent().removeClass("m6 offset-m3").addClass("m12");

							else $(".cardlogin").parent().removeClass("m12").addClass("m6 offset-m3");

							$(".logintabpanel").hide();
							$("#" + panelid).show();


						}

						function customerPswReset() {

							if ($("#resetusername").val() == "") {
								$("#resetusername").addClass("invalid").focus();
								return false;
							}

							$("#pswreseterror").addClass("hide");
							$("#pswresetcheck").removeClass("hide");

							$.post("{{app.config.base_url}}/reset-password/{{token}}", {
									password: $("#resetpassword").val(),
									confirm_password: $("#resetconfirmpassword").val()
								})
								.done(function (data) {
									var response = jQuery.parseJSON(data);
									if (response.result != "success") {
										$("#pswresetcheck").addClass("hide");
										$("#pswreseterror").html(response.error).removeClass("hide");
									} else {
										const JS_RESET_PASSWORD_SUCCESS = "{{'JS_RESET_PASSWORD_SUCCESS'|trans}}".replace(
											'&lt;br&gt;', '<br>');
										$("#pswresetcheck").html(JS_RESET_PASSWORD_SUCCESS).removeClass("grey").addClass("green");
										$("#pswreseterror, .resetinputdiv").addClass("hide");
									}
								});
						}
					</script>

				</div>




				<div class="card-action">
					<span>{% if app.config.portal_brand is defined %}{{ app.config.portal_brand|raw }}{% endif %}</span>
				</div>

			</div>
		</div>
	</div>
</div>
{% endblock %}