{extends file="layout.tpl"}

{* Security *}
{block name="no-return-functions" prepend}
    {check_auth role="CUSTOMER" login_tpl="login"}
{/block}

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

{* Breadcrumb *}
{block name='no-return-functions' append}
    {$breadcrumbs = [
        ['title' => {intl l="Account"}, 'url'=>{url path="/account"}],
        ['title' => {intl l="Update Profile"}, 'url'=>{url path="/account/update"}]
    ]}
{/block}

{block name="main-content"}
    <div class="main">

        <article class="col-main" role="main" aria-labelledby="main-label">

            <h1 id="main-label" class="page-header">{intl l="Update Profile"}</h1>

            {hook name="account-update.top"}

            {form name="thelia.front.customer.profile.update"}
            <form id="form-register" class="form-horizontal" action="{url path="/account/update"}" method="post">
                {form_field field='success_url'}
                    <input type="hidden" name="{$name}" value="{url path="/account"}" />
                {/form_field}

                {form_hidden_fields}

                {if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}

                {hook name="account-update.form-top"}

                <fieldset id="register-info" class="panel panel-default">
                    <div class="panel-heading">
                        {intl l="Personal Information"}
                    </div>

                    <div class="panel-body">
                        {form_field field="title"}
                            <div class="form-group group-title{if $error} has-error{/if}">
                                <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input col-sm-5">
                                    <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} >{$LONG}</option>
                                        {/loop}
                                    </select>
                                    {if $error}
                                        <span class="help-block">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {elseif !$value}
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}
                        {form_field field="firstname"}
                        <div class="form-group group-firstname {if $error}has-error{/if}">
                            <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                            <div class="control-input col-sm-5">
                                <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="help-block">{$message}</span>
                                    {assign var="error_focus" value="true"}
                                {/if}
                            </div>
                        </div><!--/.form-group-->
                        {/form_field}

                        {form_field field="lastname"}
                            <div class="form-group group-lastname {if $error}has-error{/if}">
                                <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input col-sm-5">
                                    <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="help-block">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}

                        {form_field field="lang_id"}
                            <div class="form-group group-lastname {if $error}has-error{/if}">
                                <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>
                                <div class="control-input col-sm-5">
                                    <select name="{$name}" id="{$label_attr.for}" class="form-control">
                                        {loop type="lang" name="lang.list" visible="*" order="alpha"}
                                            <option value="{$ID}" {if {$value} == $ID}selected{/if}>{$TITLE}</option>
                                        {/loop}
                                    </select>
                                    {if $error }
                                        <span class="help-block">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}

                        {assign var="customer_change_email" value={config key="customer_change_email"}}

                        {form_field field="email"}
                        <div class="form-group group-email {if $error}has-error{/if}">
                            <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>

                            <div class="control-input col-sm-5">
                                <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 !$customer_change_email}readonly{/if}>
                                {if !$customer_change_email}
                                    <div class="alert alert-info" role="alert">{intl l="If you want to change your email, please contact us."} <strong><a href="{url path="/contact"}" title="{intl l="Contact page"}">{intl l="Contact page"}</a></strong></div>
                                {/if}
                                {if $error }
                                    <span class="help-block">{$message}</span>
                                    {assign var="error_focus" value="true"}
                                {/if}
                            </div>
                        </div><!--/.form-group-->
                        {/form_field}

                        {if {config key="customer_confirm_email"} && $customer_change_email}
                        {form_field field="email_confirm"}
                            <div class="form-group group-email {if $error}has-error{/if}">
                                <label class="control-label col-sm-3" for="{$label_attr.for}">{$label}{if $required} <span class="required">*</span>{/if}</label>

                                <div class="control-input col-sm-5">
                                    <input type="email" name="{$name}" id="{$label_attr.for}" class="form-control" maxlength="255" placeholder="{intl l="Placeholder email confirm"}" value="{$smarty.get.email|default:$value}"{if $required} aria-required="true" required{/if}{if !isset($error_focus) && $error} autofocus{/if}>
                                    {if $error }
                                        <span class="help-block">{$message}</span>
                                        {assign var="error_focus" value="true"}
                                    {/if}
                                </div>
                            </div><!--/.form-group-->
                        {/form_field}
                        {/if}
                    </div>
                </fieldset>

                {form_field field="newsletter"}
                <div class="form-group group-newsletter{if $error} has-error{/if}">
                    <div class="control-input col-xs-11 col-sm-9 col-xs-offset-1 col-md-offset-3">
                        <div class="checkbox">
                            <label class="control-label" for="{$label_attr.for}">
                                <input type="checkbox" name="{$name}" id="{$label_attr.for}" value="{$value}"{if $checked} checked{/if}  {if $required} aria-required="true" required{/if}>{$label}
                            </label>
                            {if $error }
                                <span class="help-block">{$message}</span>
                            {/if}
                        </div>
                    </div>
                </div><!--/.form-group-->
                {/form_field}

                {hook name="account-update.form-bottom"}

                <div class="form-group group-btn">
                    <div class="control-btn col-sm-5 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary"><i class="fa fa-chevron-right"></i> {intl l="Update"}</button>
                    </div>
                </div><!--/.form-group-->
            </form>
            {/form}

            {hook name="account-update.bottom"}
        </article>

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

{block name="stylesheet"}
{hook name="account-update.stylesheet"}
{/block}

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

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