{% if customer %}
	<script>window.location.href = '/account'</script>
{% else %}
	{%- assign el_id = 'login-' | append: section.id -%}
	{% liquid
		assign settings = section.settings
		assign section_padding = settings.padding
		assign padding_class = 'sp-' | append: section_padding
		if settings.top_half_padding
			assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
		endif
		if settings.bottom_half_padding
			assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
		endif
	%}
	<style>
		#{{ el_id }} .link1 {
			text-transform: none;
		}
		#{{ el_id }} .global-input {
			border: none;
			border-radius: 0;
		}
		#{{ el_id }} .errors li {
			color: red;
			padding: 0;
		}
	</style>
	<div id="{{ el_id }}" class="bg-white {{ padding_class }}">
		<div class="login-container container">
			<div class="login-module row">
				<div class="col-12 col-hd-10 push-hd-1">
					<div class="row flex flex-column d-flex-row ai-center">
						<div class="col-d-6">
							<div class="relative">
								{% render 'global-image-wrapper',
									image: section.settings.image,
									image_alt: section.settings.title,
									additional_class: ''
								%}
							</div>
						</div>
						<div class="col-hd-1"></div>
						<div class="col-12 col-d-6 col-hd-5">
							<div v-if="showSuccess" id="success-div">
								<h1 class="h3 mb-15">{{ 'customer.recover_password.title' | t }}</h1>
								<div class="rte p2 mb-25 d-mb-20">{{ 'customer.recover_password.success' | t }}</div>
								<div>
									<a href="#" @click.prevent="showLoginHtml" class="link1">
										<span class="p3">{{- 'customer.recover_password.back_to_login' | t -}}</span>
									</a>
								</div>
							</div>
							<div v-if="showReset" id="forgot-div">
								{%- form 'recover_customer_password', id: 'recover_customer_password' -%}
									<h2 class="h3 mb-15">{{ 'customer.recover_password.title' | t }}</h2>
									<div class="rte p2 mb-25 d-mb-20">{{ 'customer.recover_password.subtext' | t }}</div>

									{%- if form.errors -%}
									<div class="form-errors mb-30 c-sale-red rte p2">
										{{ form.errors | default_errors }}
									</div>
									{%- endif -%}

									<div class="mb-15">
										{%- render "global-input",
											id: 'email-reset-pass',
											name: 'email',
											vue_model: 'resetForm.email',
											type: 'email',
											multiline: false,
											wrapper_class: 'label-as-placeholder',
											vue_wrapper_class: "{'has-message': resetForm.email_error}",
											message_class: 'global-error-msg',
											message: 'Email is required',
											label: 'Email',
											placeholder: 'Email',
										-%}
									</div>
									<button type="submit" class="btn1 w-full">{{ 'customer.recover_password.submit' | t }}</button>
									<a href="#" rel="nofollow" @click.prevent="showLoginHtml" class="link1 mt-10">
										<span class="p3">{{- 'customer.recover_password.back_to_login' | t -}}</span>
									</a>

									<input type="hidden" name="return_to" value="{{ routes.account_login_url }}#recover-success">
								{%- endform -%}
							</div>

							<div v-if="showLogin" id="login-div">
								{%- form 'customer_login', id: 'customer_login' -%}
								<h1 class="h3">{{ section.settings.title }}</h1>
								{% if section.settings.text != blank %}
									<div class="rte p3 mt-15">{{ section.settings.text }}</div>
								{% endif %}

								<div class="mt-25 d-mt-20">
									{%- if form.errors -%}
									<div class="form-errors global-error-msg mb-25 rte p2">
										{{ form.errors | default_errors }}
									</div>
									{%- endif -%}
						
									<div class="mb-10">
										{%- render "global-input",
											id: 'email',
											name: 'customer[email]',
											vue_model: 'loginForm.email',
											type: 'email',
											multiline: false,
											wrapper_class: 'label-as-placeholder',
											vue_wrapper_class: "{'has-message': loginForm.email_error}",
											message_class: 'global-error-msg',
											message: 'Email is required',
											label: 'Email',
											placeholder: 'Email'
										-%}
									</div>
									<div class="mb-15">
										{%- render "global-input",
											id: 'password',
											name: 'customer[password]',
											vue_model: 'loginForm.password',
											type: 'password',
											multiline: false,
											wrapper_class: 'label-as-placeholder',
											vue_wrapper_class: "{'has-message': loginForm.password_error}",
											message_class: 'global-error-msg',
											message: 'Password is required',
											label: 'Password',
											placeholder: 'Password'
										-%}
									</div>
									<button type="submit" class="btn1 w-full mb-10">{{ 'customer.login.submit' | t }}</button>
									<div class="flex">
										<a href="#" rel="nofollow" @click="showResetHtml" class="link1">
											<span class="p3">{{ 'customer.login.forgot_password' | t }}</span>
										</a>
									</div>
								</div>
								{%- endform -%}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		Vue.createApp({
			delimiters: ['${', '}'],
			data() {
				return {
					loginForm: {
						email: null,
						password: null,
						email_error: false,
						password_error: false,
						has_error: false
					},
					resetForm: {
						email: null,
						has_error: false,
						email_error: false,
					},
					showSuccess: false,
					showReset: false,
					showLogin: true,
				}
			},
			mounted() {
				if (window.location.hash == '#recover-password' || window.location.hash == '#recover') {
					this.showResetHtml();
				} else if (window.location.hash == '#recover-success') {
					this.showSuccess = true;
					this.showLogin = false;
					this.showReset = false;
				}

				const thisObj = this;
				document.getElementById('customer_login').addEventListener('submit', function (e) {
					e.preventDefault();

					thisObj.loginForm.has_error = false;
					thisObj.loginForm.email_error = false;
					thisObj.loginForm.password_error = false;

					if (!thisObj.loginForm.email) {
						thisObj.loginForm.email_error = true;
						thisObj.loginForm.has_error = true;
					}
					if (!thisObj.loginForm.password) {
						thisObj.loginForm.password_error = true;
						thisObj.loginForm.has_error = true;
					}

					if (thisObj.loginForm.has_error) {
						e.stopImmediatePropagation();
					}
				});

				document.getElementById('recover_customer_password').addEventListener('submit', function (e) {
					e.preventDefault();

					thisObj.resetForm.has_error = false;
					thisObj.resetForm.email_error = false;

					if (!thisObj.resetForm.email) {
						thisObj.resetForm.email_error = true;
						thisObj.resetForm.has_error = true;
					}

					if (thisObj.resetForm.has_error) {
						e.stopImmediatePropagation();
					}
				});
			},
			methods: {
				showLoginHtml() {
					this.showLogin = true;
					this.showReset = false;
					this.showSuccess = false;
				},
				showResetHtml() {
					this.showLogin = false;
					this.showReset = true;
					this.showSuccess = false;
				}
			}
		}).mount('#{{ el_id }}');
	</script>
{% endif %}
{% schema %}
	{
		"name": "Login",
		"settings": [
			{
				"type": "header",
				"content": "Section Padding"
			},
			{
				"type": "select",
				"id": "padding",
				"label": "Padding",
				"options": [
					{
						"value": "no",
						"label": "No"
					},
					{
						"value": "sm",
						"label": "Small"
					},
					{
						"value": "md",
						"label": "Med"
					},
					{
						"value": "lg",
						"label": "Large"
					}
				],
				"default": "md"
			},
			{
				"type": "checkbox",
				"id": "top_half_padding",
				"label": "Top half padding",
				"default": false
			},
			{
				"type": "checkbox",
				"id": "bottom_half_padding",
				"label": "Bottom half padding",
				"default": false
			},
			{
				"type": "header",
				"content": "Register Module Settings"
			},
			{
				"type": "image_picker",
				"id": "image",
				"label": "Choose an image"
			},
			{
				"type": "text",
				"id": "title",
				"label": "Title"
			},
			{
				"type": "richtext",
				"id": "text",
				"label": "Text"
			}
		],
		"presets": [{ "name": "Login" }]
	}
{% endschema %}