{% if customer %}
	<script>window.location.href = '/account'</script>
{% else %}
	{%- if template == 'customers/register' -%}
	{{ 'datepicker.material.css' | asset_url | stylesheet_tag }}
	{{ 'datepicker.js' | asset_url | script_tag }}
	{%- endif -%}
	
	{%- assign el_id = 'register-' | 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;
		}
	</style>
	<div id="{{ el_id }}" class="bg-white {{ padding_class }}">
		<div class="register-container container">
			<div class="register-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 id="register-div">
								{%- form 'create_customer' -%}
									<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-30 rte p3">
											{{ form.errors | default_errors }}
										</div>
										{%- endif -%}
								
										<div class="mb-15">
											{%- render "global-input",
												id: 'first_name',
												name: 'customer[first_name]',
												vue_model: 'first_name',
												type: 'text',
												multiline: false,
												wrapper_class: 'label-as-placeholder',
												vue_wrapper_class: "{'has-message' : first_name_error}",
												message_class: 'global-error-msg',
												message: 'First name is required',
												label: 'First Name',
												placeholder: 'First Name'
											-%}
										</div>
										<div class="mb-15">
											{%- render "global-input",
												id: 'last_name',
												name: 'customer[last_name]',
												vue_model: 'last_name',
												type: 'text',
												multiline: false,
												wrapper_class: 'label-as-placeholder',
												vue_wrapper_class: "{'has-message' : last_name_error}",
												message_class: 'global-error-msg',
												message: 'Last name is required',
												label: 'Last Name',
												placeholder: 'Last Name'
											-%}
										</div>
										<div class="mb-15">
											{%- render "global-input",
												id: 'email',
												name: 'customer[email]',
												vue_model: 'email',
												type: 'text',
												multiline: false,
												wrapper_class: 'label-as-placeholder',
												vue_wrapper_class: "{'has-message' : email_error}",
												message_class: 'global-error-msg',
												message: 'Email is required',
												label: 'Email',
												placeholder: 'Email'
											-%}
										</div>
										<div class="mb-20">
											{%- render "global-input",
												id: 'password',
												name: 'customer[password]',
												vue_model: 'password',
												type: 'password',
												multiline: false,
												wrapper_class: 'label-as-placeholder',
												vue_wrapper_class: "{'has-message': password_error}",
												message_class: 'global-error-msg',
												message: 'Password is required',
												label: 'Password',
												placeholder: 'Password'
											-%}
										</div>
										<div class="accepts-marketing">
											<input type="hidden" name="customer[accepts_marketing]" value="true" />
										</div>
										{%- if section.settings.tnc_label != blank and section.settings.tnc_link and section.settings.tnc_link_label -%}
										<div class="mb-20">
											{%- assign agree_text = 'customer.register.read_and_agree' | t -%}
											{%- assign error_agree_text = 'customer.register.error_read_and_agree' | t -%}
											{% render 'global-checkbox'
												text: section.settings.tnc_label,
												url: section.settings.tnc_link,
												url_label: section.settings.tnc_link_label,
												url_class: 'link1',
												name: 'customer[terms]',
												id: 'terms',
												error_message: error_agree_text,
												required: true
											%}
										</div>
										{%- endif -%}
										<button type="submit" class="btn1 w-full mb-15">{{ 'customer.register.submit' | t }}</button>
										<input type="hidden" name="return_to" value="{{ routes.account_url }}" />
									</div>
								{%- endform -%}
								<div class="sign-in flex jc-center mt-10">
									{% comment %} <span class="p3">{{ 'customer.register.sign_in_note' | t }}</span> {% endcomment %}
									<span class="p3">Already have an account? Log in</span>
									<a href="{{ routes.account_login_url }}" class="link1 ml-5">
										<span class="p3">here</span>
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script>
		Vue.createApp({
			delimiters: ['${', '}'],
			data() {
				return {
					first_name: null,
					last_name: null,
					email: null,
					password: null,
					has_error: false,
					first_name_error: false,
					last_name_error: false,
					email_error: false,
					password_error: false,
				}
			},
			mounted() {
				const thisObj = this;
				document.getElementById('create_customer').addEventListener('submit', function (e) {
					e.preventDefault();

					thisObj.has_error = false;
					thisObj.first_name_error = false;
					thisObj.last_name_error = false;
					thisObj.email_error = false;
					thisObj.password_error = false;

					if (!thisObj.first_name) {
						thisObj.first_name_error = true;
						thisObj.has_error = true;
					}
					if (!thisObj.last_name) {
						thisObj.last_name_error = true;
						thisObj.has_error = true;
					}
					if (!thisObj.email) {
						thisObj.email_error = true;
						thisObj.has_error = true;
					}
					if (!thisObj.password) {
						thisObj.password_error = true;
						thisObj.has_error = true;
					}

					if (thisObj.has_error) {
						e.stopImmediatePropagation();
					}
				});
			}
		}).mount('#{{ el_id }}');
	</script>
{% endif %}
{% schema %}
	{
		"name": "Register",
		"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": "General Settings"
			},
			{
				"type": "image_picker",
				"id": "image",
				"label": "Choose an image"
			},
			{
				"type": "text",
				"id": "title",
				"label": "Title"
			},
			{
				"type": "richtext",
				"id": "text",
				"label": "Text"
			}
		],
		"presets": [{ "name": "Register" }]
	}
{% endschema %}