{extends file="layout.tpl"}

{* Body Class *}
{block name="body-class"}page-register{/block}

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [['title' => {intl l="Register"}, 'url'=>{url path="/register"}]]}
{/block}

{block name="main-content"}

    {* This page should not replace the current previous URL *}
    {set_previous_url ignore_current="1"}

    <div class=" container mt-6 pt-5 lastblock">

        <article class="col-main" role="main" aria-labelledby="main-label">
			<div class="header-page">
				<h1 id="main-label" >{intl l="CRÉER UN COMPTE" d="hookcustomer.fo.default"}</h1>
			</div>
            {hook name="register.top"}
            {form name="thelia.front.customer.create"}
            <form id="form-register" class="form-horizontal" action="{url path="/register"}" method="post">
				<input type="hidden" name="recaptcha_responseInsc" value="" id="recaptchaResponse">
                {form_field form=$form field='success_url'}
                    <input type="hidden" name="{$name}" value="{navigate to="previous" compte="ok"}" /> {* the url the user is redirected to on registration success *}
                {/form_field}

                {form_field form=$form field='error_message'}
                    <input type="hidden" name="{$name}" value="{intl l="missing or invalid data"}" />
                {/form_field}
                {form_hidden_fields form=$form}
                {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
                {hook name="register.form-top"}
                <div class="row">
                <fieldset id="register-info" class="col-md-6">
                    <h3 class="mt-4">1. {intl l="Informations de facturation"}</h3>
                    <div class="panel-body row">
                        {form_field form=$form field="title"}
                            <div class="mb-3 {if $error} has-error{/if} col-md-2">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <select name="{$name}" id="{$label_attr.for}" class="form-control"{if $required} aria-required="true" required{/if}{if !$value || $error} autofocus{/if}>
                                        <option value="">-- {intl l="Select Title"} --</option>
                                        {loop type="title" name="country.list"}
                                            <option value="{$ID}" {if $value == $ID}selected{/if} >{$SHORT}</option>
                                        {/loop}
                                    </select>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {elseif !$value}
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
                        {form_field form=$form field="firstname"}
                        <div class="mb-3 {if $error} has-error{/if} col-md-5">
                            <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                            <div class="control-input">
                                <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder firstname"}" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                {if $error }
                                    <span class="text-danger">{$message}</span>
                                    {assign var="error_focus" value="true"}
                                {/if}
                            </div>
                        </div><!--/.mb-3 -->
                        {/form_field}
                        {form_field form=$form field="lastname"}
                            <div class="mb-3 {if $error} has-error{/if}  col-md-5">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder lastname"}" value="{$value}" {if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
                        {form_field form=$form field="email"}
                        <div class="mb-3  group-email{if $error} has-error{/if} col-md-6">
                            <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>

                            <div class="control-input">
                                <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder email"}" value="{$smarty.get.email|default:$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                {if $error }
                                    <span class="text-danger">{$message}</span>
                                    {assign var="error_focus" value="true"}
                                {/if}
                            </div>
                        </div><!--/.mb-3 -->
                        {/form_field}
						
                        {if {config key="customer_confirm_email"}}
                        {form_field field="email_confirm"}
                        <div class="mb-3  group-email{if $error} has-error{/if} col-md-6">
                            <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>

                            <div class="control-input">
                                <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder email"}" value="{$smarty.get.email|default:$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                {if $error }
                                    <span class="text-danger">{$message}</span>
                                    {assign var="error_focus" value="true"}
                                {/if}
                            </div>
                        </div><!--/.mb-3 -->
                        {/form_field}
                        {/if}
						
                        {form_field form=$form field="phone"}
                            <div class="mb-3  group-phone{if $error} has-error{/if} col-md-6">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="20" placeholder="{intl l="Placeholder phone"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
                        {form_field form=$form field="cellphone"}
                            <div class="mb-3  group-cellphone{if $error} has-error{/if} col-md-6">
                                <label class="form-label" for="{$label_attr.for}">{$label} <span class="required">*</span></label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="20" placeholder="{intl l="Placeholder cellphone"}" value="{$value}" aria-required="true" required{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
						
						
						
						
                <div class="col-md-12">

					{hook name="register.form-bottom"}
                </div>
						
						
						
						
                    </div>
                </fieldset>

                <fieldset id="register-delivery" class="col-md-6">
                    <h3 class="mt-4">
                        2. {intl l="Informations de livraison "}
                    </h3>
					<div class="panel-body">
					
                        {form_field form=$form field="company"}
                            <div class="mb-3  group-company{if $error} has-error{/if}">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder company"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if} />
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}

                        {form_field form=$form field="address1"}
                            <div class="mb-3  group-address1{if $error} has-error{/if}">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder address1"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}

                        {form_field form=$form field="address2"}
                            <div class="mb-3  group-address2{if $error} has-error{/if}">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{$label}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
						<div class="row">
                        {form_field form=$form field="zipcode"}
                            <div class="mb-3  group-zip{if $error} has-error{/if} col-md-4">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="10" placeholder="{intl l="Placeholder zipcode"}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}

                        {form_field form=$form field="city"}
                            <div class="mb-3  group-city{if $error} has-error{/if} col-md-4">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="text" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{$label}" value="{$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}



                        {form_field form=$form field="country"}
                            <div class="mb-3  group-country{if $error} has-error{/if} col-md-4">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <select name="{$name}" id="{$label_attr.for}" class="form-control"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                        <option value="">-- {intl l="Select Country"} --</option>
                                        {loop type="country" name="country.list"}
                                            <option value="{$ID}"
                                                    {if $value != ""}
                                                        {if $value == $ID}selected{/if}
                                                    {else}
                                                        {if $IS_DEFAULT}selected{/if}
                                                    {/if}

                                            >{$TITLE}</option>
                                        {/loop}
                                    </select>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
                    </div>
                    </div>
                </fieldset>
                
                
                <fieldset id="register-login" class="panel col-md-12">
                    <h3 class="mt-4">
                        3. {intl l="Login Information"}
                    </h3>

                    <div class="panel-body row align-items-center">
                        {form_field form=$form field="password"}
                            <div class="mb-3  group-password{if $error} has-error{/if} col-md-4">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}

                        {form_field form=$form field="password_confirm"}
                            <div class="mb-3  group-password_confirm{if $error} has-error{/if} col-md-4">
                                <label class="form-label" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input">
                                    <input type="password" name="{$name}" id="{$label_attr.for}" class="form-control" autocomplete="off"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="text-danger">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.mb-3 -->
                        {/form_field}
						
						    {form_field form=$form field="newsletter"}
								<div class="mb-3  group-newsletter{if $error} has-error{/if}  col-md-4">
									<div class="control-input">
										<div class="form-check form-radio-box my-4">
											<input type="checkbox" name="{$name}" id="{$label_attr.for}" value="{$value}"{if $checked} checked{/if}  {if $required} aria-required="true" required{/if} class="form-check-input mt-2">
											<label class="form-check-label" for="{$label_attr.for}">
											{$label}
											</label>
											{if $error }
												<span class="text-danger">{$message}</span>
											{/if}
										</div>
									</div>
								</div><!--/.mb-3 -->
							{/form_field}
						
                    </div>
                </fieldset>

            

                

                <div class="mb-3  group-btn col-md-12">
                    <div class="control-btn text-end">
                    	<button class="btn btn-gmp" type="submit">{intl l="Register"}</button>
                    </div>
                </div>
                </div><!--/.mb-3 -->
            </form>
            {/form}

            {hook name="register.bottom"}
        </article>

    </div><!-- /.layout -->
{/block}


{block name="stylesheet"}
{hook name="register.stylesheet"}
{/block}

{block name="after-javascript-include"}
{hook name="register.after-javascript-include"}
{/block}

{block name="javascript-initialization"}
{hook name="register.javascript-initialization"}
{/block}